javascript - Vue JS Vuetify $ emit不在第一次使用

我有两个组成部分

盘组件

盘更新组件

在Dish组件中，我像这样导入了Dish Update组件

<template>
  <v-layout row wrap>

   <v-btn @click="modalShow({name:'pizza'})"></v-btn>
    <!--Update Modal -->
    <v-dialog v-model="updateDisplay" max-width="80%">
      <update-dish></update-dish>
    </v-dialog>
    <!--Modal -->
  </v-layout>
</template>

这是我的modalShow函数。它接受一个dish对象，并将其通过emit传递到Dish Update组件。

 async modalShow(dish) {
   this.$root.$emit("dish", dish);
   this.updateDisplay = true;
 }

在Dish Update组件中，我从mounted生命周期挂钩中获取数据:

mounted() {
  this.$root.$on("dish", dish => {
    this.name = dish.name;
  }

第一次单击时不起作用:它不会将数据传递到更新组件。

第一次单击后，当我再次单击它时，它将起作用。为什么会发生这种情况？

在我将vuetify版本从1.5升级到2.2.4之前，它可以正常工作。

最佳答案

您可以尝试使用@ click.native

<template>
  <v-layout row wrap>

   <v-btn @click.native="modalShow({name:'pizza'})"></v-btn>
    <!--Update Modal -->
    <v-dialog v-model="updateDisplay" max-width="80%">
      <update-dish></update-dish>
    </v-dialog>
    <!--Modal -->
  </v-layout>
</template>

由于这是一个已知问题，因此您可以在vuetify github上看到