Question

我有两个组成部分

碟子成分
菜品更新组件

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

Vue JS Vuetify $ emit第一次无法使用

1 个答案: