v-model 全数组 inrow 而不仅仅是行的值

Question

我想在 table 中显示一个数组。在一列中，我使用了一个选中或未选中的复选框，具体取决于 v-model 的值，它应该是每个元素的 array.selected 的值。但是，v-model 包含 all array.selected 整个 array 元素，而不仅仅是当前行中的一个元素。

有人知道如何引入一些行检查以仅显示当前行的 array.selected 吗？

HTML部分：

<b-table :items="rooms" :fields="roomsHeader">
    <template v-slot:cell(selected)="row" >
            <b-checkbox v-for="(item, index) in rooms" v-model="item.selected" :key="index"></b-checkbox>
    </template>
</b-table>

数据：

data () {
        return {
            rooms: [
                {
                    "room": "A",
                    "capacity": 80,
                    "selected": false,
                },
                {
                    "room": "B",
                    "capacity": 140,
                    "selected": true,
                },
                {
                    "room": "C",
                    "capacity": 100,
                    "selected": true,
                }
            ],
            roomsHeader: [
                {
                    key: 'room',
                    label: 'Raum'
                },
                {
                    key: 'capacity',
                    label: 'Kapazität'
                },
                {
                    key: 'selected',
                    label: 'Verfügbar'
                }
            ],
        }
    },

Output screenshot (yellow the expected)

Answer 1

插槽 v-slot:cell(selected)="row" 的内容针对您的 table 的每一行进行评估，因此像这样它将为您的 table 中的每一行呈现 一个复选框每行 !

你不需要 v-for 在那个位置，只需使用 <b-checkbox v-model="row.item.selected" />

将 作用域插槽 视为回调 - 每次 b-table 呈现 selected 列当前行，它将调用您的 cell(selected) 槽以获取将当前行作为参数传递的内容...

Docs

v-model 全数组 inrow 而不仅仅是行的值

v-model full array inrow but not just value of row

vue.js

bootstrap-vue