[Vuejs]-Quasar q-checkbox does not get checked on data edit

by

0👍

I’m not sure if it’s a Vue3 change or not, but I could not get @input to trigger anything from a q-checkbox to save my life. This code was me trying to merge two q-table examples together, I wanted the expanding rows AND the checboxes multi-select down the left. If you start from the working multi-select and then add the expansion row, the expansion row substitution breaks the checkboxes, so I wanted to put them back in. I had to find another post about watchers to realize that I could use the array that was being updated by the q-checkbox to then trigger my custom code, the trick was to watch deep (like into the abyss…):

  //The array attached to v-model on my q-checkboxes
watch: {
 rChecked: {
  handler: function (val, oldVal) { 
    var x,intTrue=0;
    for(x=0;x<this.rChecked.length;x++) {
      if(this.rChecked[x]==true)
        intTrue++;
    }
    if(intTrue==this.rChecked.length) {
      this.bCheckAll=true;
    } 
    else if(intTrue==0) this.bCheckAll=false;
    else this.bCheckAll="maybe";
  },
  deep: true
 },
},

The quasar components:

<q-table
  :rows="GetFoldersInPath"
  :columns="columns"
  :pagination="FolderPagination"
  row-key="name"
  class="full-width"
  selection="multiple"
  v-model:selected="selected"
>
  <template v-slot:header="props">
    <q-tr :props="props" :style="{'background-color':Theme.SideBG}">
      <q-th
        v-for="col in props.cols"
        :key="col.name"
        :props="props"
        :rowspan="(col.name=='name' || col.name=='location_path' || col.name=='last_value' ? 2 : 1)"
      >
        <div v-if="col.name=='id'" style="display:inline-block;"><q-checkbox v-model="bCheckAll" /></div>
        {{col.label}}
      </q-th>
    </q-tr>
  </template>

  <template v-slot:body="props">
    <q-tr :props="props" @click.stop="props.expand = !props.expand" style="cursor:pointer;">
      <q-td
        v-for="col, in props.cols"
        :key="col.name"
        :props="props"
        style="padding:4px 10px;"
      >
        <q-checkbox v-if="col.name=='id'" v-model="rChecked[props.rowIndex]" />
        {{ col.value }} 
      </q-td>
    </q-tr>
  </template>
</q-table>

And no, this isn’t directly tied to the above, but this was a close match to what I was looking for so I thought I’d drop the solution here. Hope it helps someone else!

Leave a comment