У меня есть таблица, заполненная данными. У меня есть свойство selected
для данных, которые я хочу привязать к флажку в b-таблице. Кажется, я не могу понять, как это сделать.
Мои данные:
data: () => ({
tableData: [
{
title: "title01",
desc: "desc01",
selected: false
},
{
title: "title02",
desc: "desc02",
selected: false
},
],
tableColumns: [
{ key: "selected", label: "", sortable: false }
{ key: "title", label: "Title", sortable: false },
{ key: "desc", label: "Description", sortable: false }
})
HTML:
<b-table id="myTabel"
hover
striped
:items="tableData"
:fields="tableColumns">
<template slot="selected" slot-scope="row">
<b-form-group>
<input type="checkbox" v-model="How_To_Bind_To_Object_Prop?">
</b-form-group>
</template>
</b-table>
Да хоть убей, я не могу настроить v-model
для привязки к данным таблицы. v-model="tableData.selected"
привяжите все флажки ко всем объектам данных. Итак, если вы отметите одно, вы проверите все, и наоборот. Я просто не могу понять, как привязать его только к данным этой строки.
Я могу сделать это, используя более традиционный HTML и используя Vue v-for
для циклического перебора tableData
для привязки каждой строки таблицы. Однако мы пытаемся перевести большую часть, если не все, наши формы на использование bootstrap-vue.
Итак, это прекрасно работает:
<table>
<thead>
<tr>
<th :key="key" v-for="(tableColumn, key) in tableColumns">
{{ tableColumn.label }}
</th>
</tr>
</thead>
<tbody>
<tr :key="key" v-for="(tableRow, key) in tableData">
<td>
<input type="checkbox"
v-model="tableRow.selected">
</td>
<td>
{{ tableRow.title }}
</td>
<td>
{{ tableRow.desc }}
</td>
</tr>
</tbody>
</table>