How can I have dynamical data v-model?

Hi !
In my application, I display several tables with a loop. I put a “v-model” on the first row of the tables to be able to do a “select all” with a checkbox.

But it doesn’t work correctly because all the tables have the same “v-model”.
How can I make each table have its own v-model to make the checkbox work ?

Here code with the problem : https://jsfiddle.net/chtouk/7xhn9q3w/21/

My html code :


  <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>

My javascript code :

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
    
  },
  },
  

  )

Thanks for your help

Give your question objects another e.g. “checked” property and link the model to that
<input type="checkbox" v-model="item.checked" :value="item.id" :id="'choice-' + item.id" />

For the selectAll box, use a computed Property that checks/sets each of the questions properties on get/set.