如何将二维数据值绑定到buefy表中的复选框v-modal？答案

【问题标题】：How to bind two dimensional data value to checkbox v-modal in buefy table?如何将二维数据值绑定到buefy表中的复选框v-modal？
【发布时间】：2021-04-10 14:34:43
【问题描述】：

我有一个数组，格式如下。

let tableData = [
        {
          'id': 123,
          'subArray': [
            { 'subId': 'ABC123', 'name': 'subElement1', 'ischecked': true },
            { 'subId': 'DEF123', 'name': 'subElement11', 'ischecked': false }
          ]
        },
        {
          'id': 456,
          'subArray': [
            { 'subId': 'ABC456', 'name': 'subElement2', 'ischecked': true },
            { 'subId': 'DEF456', 'name': 'subElement22', 'ischecked': true }
          ]
        },
        {
          'id': 789,
          'subArray': [
            { 'subId': 'ABC789', 'name': 'subElement3', 'ischecked': false },
            { 'subId': 'DEF789', 'name': 'subElement33', 'ischecked': true }
          ]
        },
        {
          'id': 121,
          'subArray': [
            { 'subId': 'ABC012', 'name': 'subElement4', 'ischecked': false },
            { 'subId': 'DEF012', 'name': 'subElement44', 'ischecked': true }
          ]
        }
      ]

我正在使用 Buefy 表以以下方式呈现数据。

<b-table :data="tableData">
        <template slot-scope="props">
          <b-table-column label="ID" field="id"> {{ props.row.id }}</b-table-column>

          <b-table-column label="SubArray" field="subArray">
            <span v-for="sub in props.row.subArray" :key="sub.subId">
              <b-checkbox v-model="sub.isChecked">{{ sub.name }}</b-checkbox>
            </span>
          </b-table-column>

        </template>
      </b-table>

问题：当我选中任何一个复选框时，它会显示我们单击的复选框 Checked，但数组中所有行的 'isChecked' 值都更新为“True”。

示例：如果我选中“subElement22”复选框，那么 subElement11、subElement33 和 subElement44 也会更新。

预期：当我点击任何复选框时，与该行相关的值应该更新而不是其他。

如何绑定 v-modal ？

谢谢。

【问题讨论】：

标签： vue.js vuejs2 buefy

【解决方案1】：

我不确定这是否能解决您的问题，因为您没有共享所有代码。你能试试这个吗：


<div v-for="sub in tableData" :key="sub.subId">
      <div v-for="subsub in sub.subArray" :key="subsub.id">
        <input type="checkbox" v-model="subsub.isChecked"> {{subsub.name}}
     </div>
</div>

我在这里创建 2 个 for 循环。第一个用于 tableData 数组，另一个用于 subArrays。使用此代码，所有复选框的行为都如您所愿。

【讨论】：