Javascript 将道具传递给模板后，q-table上的Onclick事件停止工作

我得到了这个表，我想根据我的数据给每一行涂上颜色。 这是可行的，但似乎出于某种原因禁用了q表中的onclick事件。

@row click=“onrow click”

我不明白为什么会这样。我是新来的类星体，老实说，我不是100%确定这个参照物是如何工作的

v-slot:body=“props”

最终，我希望这是一个路由器事件，在点击时将我带到另一个页面

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

这是我的钢笔： 医生说

当用户单击/轻触一行时发出；使用主体/行/项目范围的插槽时不会发出

因此，您可以在

q-tr

代码笔-

.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 );
    }
  }
})