Блог

Я использую библиотеку vuetify. Я хочу показать диалог от дочернего компонента к родительскому компоненту. Я закончил это. Но клавиша ESC не работает при первом открытии диалогового окна. Похоже, я где-то допускаю ошибку. Кто-нибудь может мне помочь?

Родительский компонент:

HTML-код

 <template v-slot:top>
  <v-card-actions id="action">
    <v-btn color="primary" dark class="mb-2" @click.stop="showDialog">
      <v-icon>post_add</v-icon>Add
    </v-btn>
    <div class="mx-1" />
    // call dialog from child component
    <ItemCreationDialog
      :valueDialog="valueDialog"
      @updateValueDialog="updateValueDialog"
    />
  </v-card-actions>
</template>
  

код javascript:

 <script>
import ItemCreationDialog from "./Dialog";

export default {
  components: { ItemCreationDialog },
  data: () => ({
    search: "",
    valueDialog: false,
  }),

  computed: {},

  watch: {},

  created() {},

  methods: {
    updateValueDialog(val) {
      this.valueDialog = val;
    },
    showDialog() {
      this.valueDialog = true;
    },
  },
};
</script>
  

Дочерний компонент:

HTML-код

 <template>
  <v-dialog v-model="itemCreationDialog" max-width="800px">
    <v-card>
      <v-card-title> </v-card-title>
      <v-card-text> </v-card-text>

      <v-card-actions>
        <v-spacer />
        <v-btn color="primary" text @click="close">Cancel</v-btn>
        <v-btn color="primary" text @click="save">Save</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
  

код javascript:

 <script>
export default {
  props: {
    valueDialog: Boolean,
  },
  data: function () {
    return {};
  },
  watch: {},
  computed: {
    itemCreationDialog: {
      get() {
        return this.valueDialog;
      },
      set(valueDialog) {
        this.$emit("updateValueDialog", false);
      },
    },
  },

  methods: {
    close() {
      this.$emit("updateValueDialog", false);
    },
    handleOpenPopup() {},
    save() {
      this.$emit("updateValueDialog", false);
    },
  },
};
</script>
  

Я думаю, вам следует добавить событие ESC в диалоговое окно. что-то вроде:

 <v-dialog v-model="itemCreationDialog" max-width="800px" @keydown.esc="close">