Vue JS Vuetify $emit 第一次无法正常工作

Question

我有两个组件

1. 碟形组件
2. Dish 更新组件

在 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 上查看