JSFiddle - React, Tailwind, and code Playground

by chtouk

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>

CSS

.table-questions tr td, .table-questions th{
  padding: 1rem;
}

.table-questions tr {
  border-bottom: 1px solid #e8e8e8;
}

.table-questions tr:hover {
  background: #f0f2f5;
}

Vue

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