Question

这是我的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也不会打开。如何显示对话框？

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

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

1 个答案: