javascript - 选择了所有带有复选框的行，但多个表格显示为循环

Question

在我的应用程序中，我有几个用循环构建的表。

<div v-for="(dimension, index) in listQuestions" :key="index" :header="`${dimension.name}`">

            <table class="table-questions" >

                <thead>
                  <tr>
                    <th><input type="checkbox" @click="onClickCheckAll(dimension)"  /></th>
                    <th>Sous-dimension</th>
                    <th>Item</th>
                  </tr>
                </thead>

                <tbody v-for="(question,i) in dimension.sousDimensions" >

                  <tr v-for="(item, p) in question.questions">

                  
                    <td v-if="item.barometre"><input type="checkbox" checked disabled :id="'choice-' + item.id"/></td>
                    <td v-else ><input type="checkbox" @click="onClickOneCheckbox(item.id)"  :id="'choice-' + item.id" /> </td>
                    <td style="width: 40%">{{question.name}}</td>
                    <td >{{item.item}}</td>

                  </tr>

                </tbody>

            </table>


          </div>

我希望能够使用复选框选择每个表的所有行。我看过这个 tuto: vuejs tables and select all checkbox这在我看来非常好。但我不能在我的几个表的情况下应用它。

如何像示例中一样使用 selected 和 selectAll 的数据，但用于多个表？

我已经开始构建一个函数来访问这样的项目，并且我有我的项目 ID：

编辑。我尝试这样做：

    onClickCheckAll(value) { //when click to all chekckbox
      console.log("click")
      console.log(value)
      console.log(value.sousDimensions)

      for (var sousdim of value.sousDimensions)
      {
        for (var item of sousdim.questions)
        {
          console.log(this.selectCheck)

          const p = this.selectCheck.indexOf(item.id) //looking for index for each item

          const checkboxItem = document.querySelector("#choice-" + item.id) //all inputs with id choice-ID and then add or remove "checked" attribute

          if (p > -1) { //if still there, delete
            this.selectCheck.splice(p, 1);

            if (!item.barometre)
            {
              checkboxItem.checked=false
            }

          }
          else { //if not, adding in array
            this.selectCheck.push(item.id)
            checkboxItem.checked=true
          }

        }
      }
    },

    onClickOneCheckbox(val) {

      const index = this.selectCheck.indexOf(val);
      if (index > -1) //delete item if still in the array
      {
        this.selectCheck.splice(index, 1);
      }
      else
      {
        this.selectCheck.push(val)
      }

      console.log(this.selectCheck)
    }

它部分有效：当我单独单击表格的前两行，然后单击复选框以全选时，所有行都被选中...除了前两行！

在这里查看问题：https ://jsfiddle.net/chtouk/rc80ksno/35/

感谢帮助

标签： javascriptvue.js