javascript - v-for 循环中的动态 v-model 复选框

Question

在我的应用程序中，我显示了几个带有循环的表格。我在表格的第一行放了一个 v-model="selectAll"，以便能够使用复选框进行“全选”。

但它不能正常工作，因为所有表都有相同的“v-model”。如何使每个表都有自己的 v-model 以使复选框起作用？

这是我的 html 代码：

  <div id="app">
      <div>
        <div>
        {{ selectCheck }}
          <div v-for="(dimension, index) in listQuestions" :key="index" >

            <table class="table-questions" >
                <thead>
                  <tr>
                    <th><input type="checkbox" @click="select(dimension)" v-model="selectAll" /></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">
                    <!--some questions "barometre" disabled and checked by default-->
                    <td v-if="item.barometre"><input type="checkbox" checked disabled :id="'choice-' + item.id"/></td>
                    <td v-else ><input type="checkbox" v-model="selectCheck" :value="item.id" :id="'choice-' + item.id" /></td>
                    <td style="width: 60%">{{ question.name }}</td>
                    <td >{{item.item}}</td>
                  </tr>
                </tbody>
            </table>
          </div>
        </div>
      </div>
  </div>

这是我的 javascript 代码：

const columns = [
  {
    key: 'sousdimensions',
    scopedSlots: { customRender: 'name' },
  },
  {
    key: 'item',
    scopedSlots: { customRender: 'item' },
  },
];

new Vue({
el: "#app",

  methods: {

   select(value) {
      this.selectCheck = [];
      if (!this.selectAll) {
      for (var sousdim of value.sousDimensions)
      {
          for (var item of sousdim.questions)
          {
            this.selectCheck.push(item.id)
          }
        }
        
       
      }
    },


},
data: {
  listQuestions:
  [ 
    { 
        "name": "Dimension 1", 
      "sousDimensions": 
        [ 
            { 
            "name": "Sous dimension 1.1", 
            "questions": 
                [ 
                { 
                    "id": 1, 
                  "item": "Item 1.1.1", 
                  "barometre": false 
                }, 
                { 
                    "id": 2, 
                  "item": "Item 1.1.2", 
                  "barometre": false 
                }, 
                { 
                    "id": 3, 
                  "item": "Item 1.1.3", 
                  "barometre": true,  
                } 
              ] 
          }, 
          { 
            "name": "Sous dimension 1.2", 
            "questions": 
                [ 
                { 
                    "id": 4, 
                  "item": "Item 1.2.1", 
                  "barometre": false 
                }, 
                { 
                    "id": 5, 
                  "item": "Item 1.2.2", 
                  "barometre": false 
                }, 
                { 
                    "id": 6, 
                  "item": "Item 1.2.3", 
                  "barometre": true 
                } 
              ] 
          }, 
          { 
            "name": "Sous dimension 1.3", 
            "questions": 
                [ 
                { 
                    "id": 7, 
                  "item": "Item 1.3.1", 
                  "barometre": false
                }, 
                { 
                "id": 8, 
                "item": "Item 1.3.2", 
                "barometre": false 
                } 
              ] 
          } 
        ] 
    }, 
    { 
        "name": "Dimension 2", 
        "sousDimensions": 
        [ 
            { 
            "name": "Sous dimension 2.1", 
            "questions": 
                [ 
                { 
                    "id": 9, 
                  "item": "Item 2.1.1", 
                  "barometre": false 
                }, 
                { 
                    "id": 10, 
                  "item": "Item 2.1.2", 
                  "barometre": false 
                }, 
                { 
                    "id": 11, 
                  "item": "Item 2.1.3", 
                  "barometre": false
                }, 
                { 
                    "id": 12, 
                  "item": "Item 2.1.4", 
                  "barometre": true 
                } 
              ] 
          }, 
          { 
            "name": "Sous dimension 2.2", 
            "questions": 
                [ 
                { 
                    "id": 13, 
                  "item": "Item 2.2.1",
                  "barometre": false
                }, 
                {
                  "id": 14,
                  "item": "Item 2.2.2", 
                  "barometre": false
                }, 
                { 
                  "id": 15, 
                  "item": "Item 2.2.3", 
                  "barometre": false 
                }, 
                { 
                  "id": 16, 
                  "item": "Item 2.2.4", 
                  "barometre": true 
                } 
              ] 
          } 
        ] 
    }
  ],
      columns,
      selectCheck: [],
      selectAll: false
    
  },
  },
  

  )

这是理解问题的关键：https ://jsfiddle.net/chtouk/7xhn9q3w/21/

所以我认为我应该为每张桌子提供一个独特的 v-model 但我不知道该怎么做......知道吗？

标签： javascriptcheckboxvuejs2