Onclick event on q-table stop working after passing props to template



  • I got this table I want to color each row in a color depending on my data.
    This works but seems to disable my onclick event in q-table for some reason.
    @row-click="onRowClick"

    I cannot figure out why this is happening. Im new to quasar and to be honest Im not 100% sure how this referens works
    v-slot:body="props"

    Eventually I want this to be a router event taking me to a different page on click.

    <div id="q-app">
      <div class="q-pa-md">
        <q-table
            :data="data"
            :columns="columns"
            row-key="id"
            :filter="filter"
            :loading="loading"
            :rows-per-page-options="[5]"
            @row-click="onRowClick"
        >
    <!-- If I remove the template here the onRowClick works     -->
            <template v-slot:body="props">
              <q-tr :props="props" :class="tableFormat(props.row)">
                <q-td v-for="col in props.cols" :key="col.name" :props="props">{{
                  col.value
                }}</q-td>
              </q-tr>
            </template>
        </q-table>
      </div>
    </div>
    

    CSS:

    .marked-row {
      background-color: green;
    }
    .unmarked-row {
      background-color: blue;
    }
    
    new Vue({
      el: '#q-app',
      data () {
        return {
          loading: false,
          filter: "",
          rowCount: 10,
            columns: [
            {
              name: "name",
              required: true,
              label: "Name",
              align: "left",
              field: "name",
              // format: val => `${val}`,
              sortable: true
              // style: 'width: 500px'
            },
            {
              name: "age",
              required: true,
              label: "Age",
              align: "left",
              field: "age",
              format: val => `${val}`,
              sortable: true
            },
            {
              name: "location",
              required: true,
              label: "Location",
              align: "left",
              field: "location",
              format: val => `${val}`,
              sortable: true
            }
          ],
          data: [
            {
              id: 1,
              name: "Diana", 
              age: 5,
              location: "Mumbai",
              color: "blue"
            },
            {
              id: 2,
              name: "Billy",
              age: 4,
              location: "Detroit",
              color: "green"
            },
            {
              id: 3,
              name: "Mimmi",
              age: 3,
              location: "New York",
              color: "green"
            },
            {
              id: 4,
              name: "Bengan",
              age: 4,
              location: "Dubai",
              color: "blue"
            },
            {
              id: 5,
              name: "Chloe",
              age: 7,
              location: "Paris",
              color: "green"
            },
            {
              id: 6,
              name: "Ben",
              age: 6,
              location: "Los Angeles",
              color: "blue"
            }
          ]
        }
      },
    
     methods: {
        tableFormat(val) {
          console.log(val)
          if (val.color === "blue") {
            return "marked-row";
          } else {
            return "unmarked-row";
          }
        },
        onRowClick(evt, row) {
          console.log("clicked on ", row );
        }
      }
    })
    

    Here is my pen:
    https://codepen.io/haangglide/pen/MWeRaJW



  • @acros You can add the click event to the q-tr directly, like this:

    <q-tr :props="props" :class="tableFormat(props.row)" @click="onRowClick($event, props.row)">
    

    The @row-click event has no effect if you manually override the table row with the slot, so you can remove that from the q-table


Log in to reply