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 上看到