Vue JS Vuetify $emit 第一次不工作

Question

我有两个组件

1. 盘组件
2. 菜品更新组件

在 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 之前，它起作用了。

Answer 1

您可以尝试使用@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 上看到