Vuetify v-data-table双击事件不起作用

问题描述

我正在使用v-data-table。

根据official library，它有一个dblclick:row事件。

我尝试使用它，但是不起作用。

（click：row事件工作正常。）

vuetify版本是最新的[email protected]。

如何在v-data-table中使用双击事件？

这是我的代码示例。

（对不起，我没有写完整的代码。我添加了。）

 <div id="app">
      <v-app id="inspire">
        <v-card>
          <v-data-table
          :items="items"
          :headers="headers"
          dense
          v-model="selected"
          hide-default-footer
          @click:row="clickRow"
          @dblclick:row="dblclickRow"
        >
        </v-data-table>
        </v-card>
      </v-app>
    </div>
    new Vue({
      el: '#app',vuetify: new Vuetify(),data: () => ({
        selected: [],headers: [
              {
                text: "Dessert (100g serving)",align: "start",sortable: false,value: "name"
              },{ text: "Calories",value: "calories" },{ text: "Fat (g)",value: "fat" },{ text: "Carbs (g)",value: "carbs" },{ text: "Protein (g)",value: "protein" },{ text: "Iron (%)",value: "iron" }
            ],items: [
              {
                name: "Frozen Yogurt",calories: 159,fat: 6.0,carbs: 24,protein: 4.0,iron: "1%"
              },{
                name: "Ice cream sandwich",calories: 237,fat: 9.0,carbs: 37,protein: 4.3,{
                name: "Eclair",calories: 262,fat: 16.0,carbs: 23,protein: 6.0,iron: "7%"
              },{
                name: "Cupcake",calories: 305,fat: 3.7,carbs: 67,iron: "8%"
              },{
                name: "Gingerbread",calories: 356,carbs: 49,protein: 3.9,iron: "16%"
              },{
                name: "Jelly bean",calories: 375,fat: 0.0,carbs: 94,protein: 0.0,iron: "0%"
              }
            ],selected:[]
      }),methods: {
            dblclickRow(){
              console.log("rowDoubleClicked");
            },clickRow(){
            //  console.log("rowClicked");
            }
      }
    })

解决方法

您的功能应在方法下。请参阅此链接https://vuejs.org/v2/guide/events.html#Method-Event-Handlers。

事件未达到您的职责