VueJS道具意外行为

因此，我有一个Vuejs书籍组件，它获得了一个“书”道具，它是一个带有标题，颜色，章节等的对象。下面是代码。该模板工作正常，并能够创建章节。我想要做的是在挂载上设置导航颜色。VueJS道具意外行为

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？

来源

2017-02-18 arlyon

你如何查看数据控制台？通常数据在您查看时进行评估，而不是在您登录时进行评估。另外，为什么不从一开始就简单地在'CSS'类中添加颜色，或者像这样：https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1 – Cristy

backgroundColor是对于只是常规html元素的导航栏。 – arlyon

尝试在'this。$ nextTick（）'中改变颜色。 – Cristy

在我的情况的解决方案是，这本书的道具是通过AJAX填充，然后再安装函数被调用时，该组件的坐骑，而不是当实际数据被加载。解决方法是使用beforeUpdate并在数据更改时设置颜色。

来源

2017-02-18 14:07:10 arlyon

尝试设置props这样：

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

来源

2017-02-18 12:10:32

它并没有完全解决问题，但它让我走上了正轨。问题在于数据是通过ajax获取的，我应该更改beforeUpdate而不是挂载的颜色。我注意到它，因为数据最初是一个数组，但没有通过检查，但在取得ajax后没有失败。谢谢 – arlyon

您需要确保这本书组件安装，图书数据已经由主机元素被成功获得，这样你就可以使用这本书，所以：

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

来源

2017-02-18 17:00:46 Surmon

VueJS道具意外行为

回答

相关问题