mercredi 7 avril 2021

Dynamic v-model checkbox in a v-for loop

In my application, I display several tables with a loop. I put a v-model="selectAll" 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 ?

This is my html code :


  <div id="app">
      <div>
        <div>
        
          <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%"></td>
                    <td ></td>
                  </tr>
                </tbody>
            </table>
          </div>
        </div>
      </div>
  </div>

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

  )

And this is the fiddle to understand the problem : https://jsfiddle.net/chtouk/7xhn9q3w/21/

So i think i should give a unique v-model per table but I don't know how to do this...Any idea ?




Aucun commentaire:

Enregistrer un commentaire