No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Framework
    2
    4
    966
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      RNat last edited by

      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>
      
      1 Reply Last reply Reply Quote 0
      • T
        turigeza last edited by 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 ?

        1 Reply Last reply Reply Quote 0
        • R
          RNat last edited by

          @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?

          1 Reply Last reply Reply Quote 0
          • T
            turigeza last edited by

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

            1 Reply Last reply Reply Quote 0
            • First post
              Last post