2017-06-22 66 views
1

我有一個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

回答

1

@AndrewFrance說的是正確的。

還有一個不同的修復;使用v-if而不是v-showv-if從DOM中刪除組件,而不是隱藏它。

+0

在某些時候,我使用'v-if',我不記得爲什麼我將它改爲'v-show'。我想也許我認爲節目會更有效率。這似乎是最簡單的解決方案。 – verism

1

這個錯誤是因爲你的h2期待着與一個叫rendered屬性的對象,但你改變videoPost爲字符串。你可以做this.videoPost = {title: {rendered: ""}, video_embed_code: ""}。 或者使用Lodash中的方法進行綁定,或在綁定中使用警衛videoPost && videoPost.title.rendered,並設置this.videoPost = {}

+0

啊當然有道理。但唯一的問題是具有更多(嵌套)屬性,這可能會變得非常冗長。我不確定你的看法是什麼 - 你能否詳細說明一下? – verism

+0

我只是指''&&'用來防範空值。用我上面的例子,如果你設置'videoPost'爲'false',那麼'.title.rendered'不會被調用。或者'videoPost'是'{}',那麼你可以'videoPost.title && videoPost.title.rendered'我想。 –