Vue JS Vuetify $emit이 처음 작동하지 않습니다.

Vue JS Vuetify $emit이 처음 작동하지 않습니다.

2개의 컴포넌트가 있습니다.

1. 식기 구성품
2. Dish Update 구성 요소

Dish 컴포넌트에서 Dish Update 컴포넌트를 이렇게 Import했습니다.

<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오브젝트를 생성하여 Dish Update 컴포넌트에 전달합니다.emit.

 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로 업그레이드하기 전에 작동했습니다.

using@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에서 확인할 수 있습니다.

언급URL : https://stackoverflow.com/questions/59840814/vue-js-vuetify-emit-is-not-working-on-first-time