VueJS 道具表现异常

Question

所以我在 Vuejs 中有一个书籍组件，它获得了一个 "book" 道具，这是一个 object，带有标题、颜色、章节等。这是代码。该模板工作正常，并且能够创建章节。我想做的是在挂载上设置导航颜色。

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) 显示组件正确地具有带有观察者的 prop 和所有属性，但是在打印时 this.book 只有观察者出现，这就是为什么 this.book.color 不起作用。这种不一致有什么原因吗？为什么组件中的书 object 与 this.book 不一样？

Answer 1

尝试这样设置props：

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

Answer 2

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

Answer 3

您需要确保已经安装了图书组件，宿主元素已经成功获取图书数据，才能使用图书，所以：

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

VueJS 道具表现异常

VueJS prop behaving unexpectedly

javascript

vue.js

vue-component