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道具意外行爲

回答

相關問題