我有一個Vue組件,基本上就像一個模態。當列表項的點擊它激活,並顯示一些物體屬性的值,與上述項目相關聯:我應該如何動態地添加和刪除Vue中的模態數據?
let myModal = Vue.component('my-modal', {
props: {
contents: {}, prev: {}, next: {}, show: { type: Boolean }
},
data: function() {
return {
isVisible: this.show,
videoPost: this.contents
}
},
template:
`<div class="page-modal" v-show="isVisible">
<button @click.prevent="close" class="close"></button>
<div v-html="videoPost.video_embed_code"></div>
<h2 v-html="videoPost.title.rendered"></h2>
</div>`,
methods: {
close: function() {
this.isVisible = false
},
openWithVideo: function (post) {
this.videoPost = post
this.isVisible = true
}
},
created: function() {
eventHub.$on('showModal', this.openWithVideo)
this.isVisible = this.show
},
});
目前,它接受了幾個道具,最重要的contents
,在數據對象並輸出爲videoPost
真實引用在模板中使用。
我遇到的問題是它顯示了一個視頻(嵌入到iframe中),並且 - 在當前狀態下 - 如果視頻在用戶點擊關閉時播放,則視頻繼續以可聽方式播放。
我試圖改變close方法是這樣的:
close: function() {
this.isVisible = false
this.videoPost = '' // Added this line
}
但是,這將引發一個錯誤:「類型錯誤:無法讀取屬性未定義‘渲染’」和模態保持打開狀態。
我認爲我顯示數據的方式肯定有問題。我究竟做錯了什麼?
我使用Vue公司2.2
在某些時候,我使用'v-if',我不記得爲什麼我將它改爲'v-show'。我想也許我認爲節目會更有效率。這似乎是最簡單的解決方案。 – verism