Set toggle as table cell data and and call a function whenever toggle clicked



  • Hi
    I’m new to great Quasar. I want to set the toggle component for one of my columns in my table. Whenever the user changes the state of the toggle, I want to update something in my database. I did it as below. Is my solution right? I want to call change_tunnel_mode whenever the user clicks the toggle using the current row id.

    <template>
      <div class="q-pa-xs">
        <q-table
          dense
          :columns="columns"
          :data="data"
          color="primary"
          row-key="name"
          hide-bottom
          :loading="loading"
        >
          <template v-slot:loading>
            <q-inner-loading showing color="primary" />
          </template>
          <template v-slot:body-cell-tunnel="props">
            <q-td :props="props">
              <div>
                <q-toggle
                  :value="props.value"
                  @input="change_tunnel_mode(props.row.id)"
                />
              </div>
              <div class="my-table-details">
                {{ props.row.details }}
              </div>
            </q-td>
          </template>
        </q-table>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        change_tunnel_mode (id) {
          console.log('change tunnel mode for: ', id)
        }
      },
      data () {
        return {
          loading: false,
          columns: [
            {
              name: 'id',
              required: true,
              label: 'ID',
              align: 'left',
              field: row => row.id,
              sortable: true
            },
            {
              name: 'alias',
              align: 'center',
              label: 'Alias',
              field: 'alias',
              sortable: true
            },
            { name: 'tunnel', label: 'Tunnel', field: 'tunnel_mode' },
            { name: 'connections', label: 'Connections', field: 'carbs' }
          ],
          data: [
            {
              id: 1,
              alias: 'saeed',
              tunnel_mode: false,
              carbs: 24
            },
            {
              id: 2,
              alias: 'ali',
              tunnel_mode: true,
              carbs: 24
            }
          ]
        }
      }
    }
    </script>
    
    <style></style>
    
    


  • @saeed

    Instead of writing your own checkbox code in a slot, you can make use of Q-Tables inbuild selection support:

    See example:
    https://quasar.dev/vue-components/table#Selection

    See my demo with selection and selectionChangeListener:
    https://codepen.io/ontwikkelfabriek/pen/BazxbeM



  • @dobbel Thanks. But I don’t want to select a row. I want to activate or deactivate an option for each row using a toggle.



  • @dobbel anyway, Isn’t it possible to select a row, by clicking any of its cells?



  • Maybe you can set table selection model programmatically.

    <q-table

    :selected.sync=“tbSelected”
    @row-click=“rowClick”


    rowClick(row) { this.tbSelected.push(row); //your right code here }




Log in to reply