Question

我有一个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
}

但这会引发错误：＆＃34; TypeError：无法读取属性＆＃39;呈现＆＃39;未定义的＆＃34;并且模态保持开放。

我认为我显示数据的方式肯定有问题。我做错了什么？

我正在使用Vue 2.2

Answer 1

错误是因为您的h2期望具有名为rendered的属性的对象，但您正在将videoPost更改为字符串。你可以做this.videoPost = {title: {rendered: ""}, video_embed_code: ""}。或者在绑定中使用Lodash中的dig方法，或者在绑定中使用videoPost && videoPost.title.rendered等守卫并设置this.videoPost = {}。

Answer 2

@AndrewFrance所说的是正确的。

还有一个不同的解决方案;使用v-if代替v-show。 v-if从DOM中删除组件，而不是仅隐藏它。

如何在Vue中动态添加和删除模式中的数据？

2 个答案: