Question

所以我在Vuejs中有一本书组件可以获得一本书＃34; prop是一个具有标题，颜色，章节等的对象。这是代码。该模板工作正常，并能够创建章节。我想要做的是在mount上设置导航颜色。

Vue.component('book', {
    props: ['book'],
    template: `
        <section class="book">
            <h1 :id="book.title"><i class="fa fa-book"></i> {{ book.title }} {{ book.description }}</h1>
            <chapter v-for="chapter in book.chapter" :chapter="chapter"></chapter>
        </section>
    `,
    mounted: function() {
        console.log(this);
        console.log(this.book);
        document.getElementById("nav").style.backgroundColor = '#' + this.book.color;
    }
});

在已安装的函数中，console.log(this)显示组件正确地具有带有观察者的支柱和所有属性但是在打印this.book时仅显示观察者，这就是为什么this.book.color不起作用。这种不一致的原因是什么？为什么组件中的书籍对象与this.book相同？

Answer 1

尝试以这种方式设置props：

book: {
  type: Object,
  default: () => {}
}

Answer 2

我的解决方案是通过ajax填充book prop，然后在组件安装时调用挂载的函数，而不是在加载实际数据时调用。解决方案是使用beforeUpdate并在数据更改时设置颜色。

Answer 3

您需要确保已安装图书组件，主题元素已成功获取图书数据，因此您可以使用该书，所以：

<book v-if="!!book" :book="book"></book>

VueJS道具表现出乎意料

3 个答案: