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
    1. Home
    2. saeed
    S
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 3
    • Best 0
    • Groups 0

    saeed

    @saeed

    0
    Reputation
    1
    Profile views
    3
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    saeed Follow

    Latest posts made by saeed

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

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

      posted in Help
      S
      saeed
    • RE: Set toggle as table cell data and and call a function whenever toggle clicked

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

      posted in Help
      S
      saeed
    • 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>
      
      
      posted in Help
      S
      saeed