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

[saeed]

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>

[dobbel]

@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

[saeed]

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

[saeed]

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

[jik]

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 }

[dobbel]

@saeed

single select:
https://codepen.io/crawfordw/pen/oNXOMKg

multi-select:
https://codepen.io/smolinari/pen/WNvWMvB