我無法關閉或隱藏我的 vue 對話框，我不知道為什么。這是我呼叫對話框的 js 檔案：
<ItemChooserDialog v-model="showItemChooser" @onItemSelected="onStockSelected" />
export default {
data() {
return {
showItemChooser: false,
}
}),
methods: {
chooseItem(context) {
var self = this;
self.showItemChooser = true;
},
onStockSelected(result) {
var self = this;
let id = result.id;
let name = result.name;
self.showItemChooser = false;
},
}
這是我的對話框：
<template>
<v-dialog v-model="show" max-width="600">
...
</v-dialog>
</template>
computed: {
show: {
get () {
return this.value
},
set (value) {
this.$emit('input', value)
}
}
},
props: {
value: Boolean
},
methods: {
rowClick{
this.$emit('onItemSelected', clicked_item);
}
}
如果我在對話框中選擇一個專案，則 js 檔案的回呼方法“onStockSelected”將運行并且 self.showItemChooser 設定為 false 但對話框仍然可見。
uj5u.com熱心網友回復：
您沒有任何實際隱藏對話框的代碼。有條件地隱藏/顯示元素的最常見方法是使用v-if 指令。
在您的對話框元素上：
<template>
<v-dialog v-if="value" v-model="show" max-width="600">
...
</v-dialog>
</template>
uj5u.com熱心網友回復：
檢查我制作的這個代碼和框：https ://codesandbox.io/s/stack-70146776-6tczf?file =/ src/components/ItemChooserDialog.vue
我可以看到您可能以我之前的答案之一為例。在這種情況下，因為您正在使用自定義對話框組件的 prop值來處理 v-dialog v-model。您可以通過兩種方式關閉對話框。
- 通過將showItemChooser設定為 false從父組件關閉對話框。正如你在你的例子中所做的那樣。我認為它不起作用，因為您在子組件中宣告了沒有括號的 rowClick 方法。
同樣在我的例子中，我決定在我的事件名稱上使用 kebab-case 但這只是 eslint 的一個約定。其他一切看起來都不錯。
onStockSelected(result) {
var self = this;
let id = result.id;
let name = result.name;
self.showItemChooser = false;
},
- 從子組件關閉對話框。由于您在v-dialog 的 v-model 上使用了計算機屬性顯示。您可以通過簡單地將顯示值設定為 false 來關閉對話框。
closeFromChild() {
this.show = false
}
最后但并非最不重要的一點是，如果您在對話框外單擊，默認情況下 v-dialog 會自行關閉。如果你想避免這個功能，你可以像我在我的例子中所做的那樣將持久性道具設定為你的對話框。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/368809.html
標籤：javascript Vue.js Vuetify.js
上一篇：vue3無法訪問方法中的資料物件