how to set toggle button to true or false while rendering the Q table

RNat

I am a newbie to Vuejs and Quasar . I have a q-table that has a toggle button column, a name value and a drop down. I want to set some toggle button values to true based on the data I retrieve from API. Should I do it in the Mounted event? If yes , how? please help.

<template>
    <div>
        <q-card bordered class="q-mt-md">
          <q-table
            id="rTable"
            title=""
            :data="rAccData"
            :columns="rAccColumns"
          >
            <template v-slot:body-cell-enroll="props">
              <q-tr :props="props">
                <q-td :props="props">
                  <div>
                    <q-toggle v-model="props.row.rToggle" checked-icon="check" value="check" />
                  </div>
                </q-td>
              </q-tr>
            </template>
            <template v-slot:body-cell-dAcc="props">
              <q-tr :props="props">
                <q-td :props="props">
                  <div>
                    <cu-select 
                      v-model="props.row.accSelected"
                      :options="accOptions"
                      option-value="Id"
                      option-label="Id" 
                    />
                  </div>
                </q-td>
              </q-tr>
            </template>
          </q-table>
        </q-card>
      </div>      
</template>

VueJS:
 data() {
    return {
          riArr: [],
          errorMess: '',
          rToggle: true,
          Depselected: '',
          accSelected: '',
          rAccColumns: [
        {
          name: 'enroll',
          required: true,
          label: 'Enrollment',
          align: 'left',
          field: 'enroll'          
        },
        {
          name: 'Acc',
          label: 'AccId',
          field: 'Acc',
          style: 'width: 200px',
          align: 'left'
        },
        {
          name: 'dAcc',
          label: 'dAcc',
          field: 'dAcc',
          align: 'left',
          style: 'width: 150px'
         }
       ]

    };
  },
  computed: {
    ...mapGetters('ind', ['Ind', 'Acc']),
    hasValidationError() {
       return this.errorMess !== '';
    },
    rAccData() {
      return this.Acc.filter(a => a.testType === testTypeEnum.A1);
    },
    accOptions() {
      return this.Acc.filter(a => a.byId === 100);  
    }
  },
  watch() { },
  methods: {
    ...mapActions('ind', ['Ind', 'Acc']),
    
      getPreselectedAcc() {
        // api call to get the data      
	  this.riArr = response.data.payload; 
	  // result will be a list of objects with the properties 'indId','Acc','dAcc'. 
	  //The toggle buttons and drop down should already be selected based on this result when the table is rendered 
          return this.riuArr;   
        })
        .catch(function(error) {
          console.log(error);
        });
   }
  },
  mounted () {
    this.getInd();
    this.getPreselectedAcc(); 
    this.getAcc();    
  }
}
</script>

turigeza

@RNat
You mean you would like to override the data in the rows ? It is your rows you are loading which contain the model for your select and toggle components. So you have to make sure the rows contain those properties. If they don’t and you would like to set them you should do it when you load them. In your case here

rAccData() {
      return this.Acc.filter(a => a.testType === testTypeEnum.A1);
},

You could do something like

return this.Acc.filter(a => a.testType === testTypeEnum.A1).forEach(row => this.$set(row, 'rToggle', true))

Btw what is value="check" supposed to do ?

RNat

@turigeza

Thanks for prompt replying and I apologize for late reply. Yes. I wanted to override the data after or while the q table is rendering. I changed ‘rAccData()’ based on your suggestion But it became complicated and I was not able to show the option selected in the drop down even though the toggle button was set correctly.
So I changed the ‘Acc’ object to match the properties of the q table (can be done the other way too). I was able to populate the q table with preselected values.

Also I have another question. I have a ‘confirm’ button which when clicked on , has to loop through the q table and get the rows where the toggle button is enabled.
How do we do that?

turigeza

@RNat you just loop through the table data when the confirm button is clicked. Just like above.