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

Posted 2023-02-23

【中文标题】Vue JS Vuetify $emit 第一次无法正常工作

【英文标题】：Vue JS Vuetify $emit is not working on first time

【发布时间】：2020-05-07 11:55:59

【问题描述】：

我有两个组件

碟形组件 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->
      <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 之前它工作正常。

【问题讨论】：

为什么要异步 modalShow() ？

没有异步结果的事件还是一样

为了清楚起见，请为您在此处提到的所有案例粘贴组件代码的模板部分以及脚本部分。错误可能在您的代码库中的其他位置

【参考方案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->
      <update-dish></update-dish>
    </v-dialog>
    <!--Modal -->
  </v-layout>
</template>

由于这是一个已知问题，您可以在 vuetify github 上查看

【讨论】：

阻止事件默认的原因是什么，我不确定为什么在这种情况下这会有所帮助，如果成功调用了 modalShow 函数，为什么这对事件很重要？

我改变了我的答案，但我首先使用了 e.preventDefault() 可能是 vuetify v-btn 在点击时添加了一些行为，因为这不是普通的 html 按钮

谢谢，您在那里做出的假设似乎是合理的