JSFiddle - React, Tailwind, and code Playground

by chtouk

HTML

<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="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">
                    <!--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" @click="onClickOneCheckbox(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: {

    

    onClickCheckAll(value) {
      console.log("click")
      console.log(value)
      console.log(value.sousDimensions)

      for (var sousdim of value.sousDimensions)
      {
        //console.log(sousdim)// all sousdimensions in array = access questions

        for (var item of sousdim.questions)
        {
          //console.log(item.item) // all items of one dimension
          console.log(item.id)
          this.selectCheck.push(item.id)
          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);
            console.log(checkboxItem)

            if (!item.barometre)
            {
              checkboxItem.removeAttribute("checked")
            }

          }
          else { //if not, adding in array
            this.selectCheck.push(item.id)
            checkboxItem.setAttribute("checked", "")
            console.log(checkboxItem)

          }


        }
      }
    },

    onClickOneCheckbox(val) {
      const index = this.selectCheck.indexOf(val);
      if (index > -1)
      {
        this.selectCheck.splice(index, 1);
      }

      console.log(this.selectCheck)
    }
},
data: {
  listQuestions:[ { "@id": "/api/dimensions/37", "@type": "Dimension", "name": "Autonomie", "sousDimensions": [ { "@id": "/api/sous_dimensions/31", "@type": "SousDimension", "name": "Marges de manoeuvre", "questions": [ { "@id": "/api/questions/1", "@type": "Question", "id": 1, "item": "Mon travail me laisse la possibilité de prendre des...