Vue JS Vuetify $ emit не работает в первый раз

Question

У меня есть два компонента

1. Di sh компонент
2. Di sh Обновление компонента

В Di sh компонент I импортировал компонент обновления Di sh следующим образом

<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 и передает его компоненту обновления Di sh через emit.

 async modalShow(dish) {
   this.$root.$emit("dish", dish);
   this.updateDisplay = true;
 }

В компоненте обновления Di sh я получаю данные в жизненном цикле mounted hook:

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