vue.js - b-table 中复选框的 bootstrap-vue 问题
问题描述
我在让复选框正常工作时遇到问题。为“选定”插槽中的每一行呈现的复选框未绑定到正确的行。当您单击复选框时,它将顶行的复选框设置为真/假位置。
问题:1)如何将行的复选框的真/假状态绑定到它的行项目?我正在尝试将其绑定到 data.item.selected ,然后遍历数据以查找“选定”对象并执行必要的操作。我什至尝试将行对象添加到新的数据数组中,但它只添加了第一行?
2)根据 HEAD_selected 插槽复选框将所有行复选框的真/假变为真/假的最佳方法是什么?
代码:
<b-table
striped
hover
outlined
:items="schools"
:fields="fields"
:per-page="perPage"
:current-page="currentPage"
:total-rows="totalRows"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc">
<template slot="HEAD_selected" slot-scope="data">
<b-form-checkbox @click.native.stop v-model="allSelected">
</b-form-checkbox>
</template>
//Not working. data.item.selected is always the top row in all of the results, not it's current position
<template slot="selected" slot-scope="data">
<b-form-checkbox id="checkbox" @click.stop v-model="data.item.selected">
</b-form-checkbox>
</template>
</b-table>
解决方案
回答:
问题是 b-form-checkbox 中的 id。id="checkbox" 绑定到同一个复选框。一旦我将其更改为 :id="'checkbox'+data.index" 它就起作用了!
推荐阅读
- python - Tkinter 窗口未关闭
- url - 密码重置网址不再有效
- node.js - Node.js:Buffer.slice 和 Buffer.subarray 的区别
- php - 如何保护android应用程序的rest api
- google-cloud-spanner - 如何查找 Google Spanner 表创建日期和时间?
- html - Html Profile Card 右对齐
- node.js - 如何将反应状态传递给 Node 后端?
- javascript - 从 HTML 类中提取日期并将与另一个日期的差异返回到文本框中(天)
- azure-devops - Azure DevOps - 如何跟踪计划内和计划外的工作项
- javascript - 这是“解构分配”的一个方面还是其他什么?