Vuetify 对话框不会在数据表中打开答案

【问题标题】：Vuetify dialog won't open in data tableVuetify 对话框不会在数据表中打开
【发布时间】：2019-01-28 04:25:23
【问题描述】：

这是我的 UI 部分代码：

<div>
   <v-data-table :headers="headers" :items="items">
      <template slot="items" slot-scope="props">
        <tr @click="showDialog(props.item)">
          <td>{{ props.item.company_name }}</td>
        </tr>
      </template>
   </v-data-table>

   <v-dialog v-model="dialog">
   {{form}}
   </v-dialog>
</div>

这是我的脚本代码：

data(){
  return{
    dialog: false,
    form: {}
  }
},
methods: {
  showDialog(data){
    this.dialog = true
    this.form = data

  }
}

现在我的问题是，即使变量 'dialog' 等于 true，v-dialog 也不会打开。如何显示对话框？

【问题讨论】：

老实说你的代码看起来不错，你能创建一个codepen吗？

标签： vue.js vuetify.js

【解决方案1】：

试试

<tr>
 <td @click="showDialog(props.item)">{{ props.item.company_name }}</td>
</tr>

所以点击将在表的每个元素“company_name”上执行。

你也可以添加一个带有按钮的新列来调用函数

<td>
    <v-btn icon class="mx-0" @click="showDialog(props.item)">
        <v-icon color="black">edit</v-icon>
    </v-btn>
</td>

【讨论】：