我的 Web 應用程式中有兩個組件，主要和更新模式。我希望模態組件可以在進入主頁時立即顯示。所以，當 main.vue 被掛載時，showModal設定為 true。但是，當網頁進入主頁面時，模態不會出現。我認為showModal變為 true 并傳遞給模態組件。當我使用 vue devtool 時，它顯示popModal為 false。這真的讓我很困惑。
我應該更改設定真實值或任何建議的生命周期嗎？
謝謝！
主程式
<template>
<modal :isShow="showModal"></modal>
...
</template>
<script>
export default {
data () {
return {
showModal: false
}
}
mounted() {
//do something
this.showModal = true
}
}
<script>
Modal.vue
<template>
<modal v-if="popModal" v-model="popModal">
<p>xxxxxx</p>
<button @click="fn()">Click</button>
</modal>
</template>
<script>
export default {
props: ['isShow'],
data () {
return {
popModal: this.isShow//supposed to be true
}
}
methods: {
fn() {
this.popModal = false
}
}
}
<script>
uj5u.com熱心網友回復：
問題是資料在創建組件時被初始化一次。當道具 isShow 更改時，資料中的舊值仍然存在。您需要添加觀察者來更新資料
watch: {
isShow(newVal, oldVal) {
// newVal contains the updated value
// oldVal contains the previous value
this.popModal = newVal;
}
}
或者您可以在值更改后初始化資料：
// Main.vue
<modal v-if="showModal" :isShow="showModal"></modal>
// Modal.vue
<modal v-model="popModal">
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353944.html
上一篇：我正在撰寫函式以查看學院的詳細資訊，它顯示了該學院的專業數量。如何在模板中計算陣列？
下一篇：如何顯示影像圖示而不是影像名稱