Vue JS Vuetify $emit 在第一次使用时无效。

Question

我有两个组件

1. 菜肴组件
2. 菜肴更新组件

在菜肴组件中，我像这样导入了菜肴更新组件

<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之前，它是可以正常工作的。

- Thisara Jayamuni

---

为什么要使用异步的modalShow()？ - Qonvex620

事件没有异步结果仍然相同。 - Thisara Jayamuni

请为了清晰起见，将您在此处提到的所有情况的组件代码的模板部分以及脚本部分粘贴出来。错误可能在您的代码库中的其他地方。 - maestro.inc

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

- Nipun Jain

---

阻止事件默认行为的原因是什么，我不确定这样做会在这种情况下有何帮助，如果modalShow函数成功调用，那么事件有什么关系呢？ - rb20

我已经修改了我的答案，但是我首先使用了e.preventDefault()，因为Vuetify v-btn可能会在单击时添加一些行为，而这不是普通的HTML按钮。 - Nipun Jain

谢谢，你做出了一个合理的假设。 - rb20