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.

      <div class="q-pa-xs">
          <template v-slot:loading>
            <q-inner-loading showing color="primary" />
          <template v-slot:body-cell-tunnel="props">
            <q-td :props="props">
              <div class="my-table-details">
                {{ props.row.details }}
    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 =>,
              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

  • @saeed

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

    See example:

    See my demo with selection and selectionChangeListener:

  • @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.



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

Log in to reply