VueJS prop verhält sich unerwartet

Also habe ich eine Buchkomponente in Vuejs, die eine "Buch" -Stütze erhält, die ein Objekt mit einem Titel, einer Farbe, Kapiteln usw. ist. Hier ist der Code. Die Vorlage funktioniert einwandfrei und kann Kapitel erstellen. Was ich versuche, ist, die Farbe des Navis auf mount einzustellen.VueJS prop verhält sich unerwartet

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; 
    } 
});

Im montierten Funktion zeigt console.log(this), dass die Komponente richtig die Stütze mit einem Beobachter hat und alle jedoch Attribute, wenn this.book Druck nur der Betrachter zeigt sich, weshalb this.book.color funktioniert nicht. Irgendein Grund für diese Inkonsistenz? Warum ist das Buchobjekt in der Komponente nicht identisch mit this.book?

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

Quelle

2017-02-18 arlyon

Wie sehen Sie die Daten in die Konsole? Normalerweise werden die Daten ausgewertet, wenn Sie sie anzeigen, nicht wenn Sie sie protokollieren. Auch, warum nicht einfach die Farbe in einer "CSS" -Klasse von Anfang an oder wie folgt hinzufügen: https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1 – Cristy

Die backgroundColor ist für die Navigationsleiste, die nur ein normales HTML-Element ist. – arlyon

Versuchen Sie das in Farbänderung in 'this. $ nextTick()'. – Cristy

Die Lösung in meinem Fall war, dass das Buch prop über Ajax ausgefüllt ist, und die montierte Funktion wird dann, wenn die Komponente Mounts genannt wird, nicht wenn die Ist-Daten:

Quelle

2017-02-18 14:07:10 arlyon

Try props auf diese Weise eingestellt ist geladen. Die Lösung besteht darin, beforeUpdate zu verwenden und die Farbe festzulegen, wenn sich die Daten ändern.

Quelle

2017-02-18 12:10:32

Es hat das Problem nicht ganz gelöst, aber es hat mich auf die richtige Spur gebracht. Das Problem war, dass Daten über Ajax geholt wurden und ich die Farbe auf beforeUpdate anstelle von mounted geändert haben sollte. Ich bemerkte es, weil die Daten anfänglich ein Array waren, das die Prüfung nicht bestanden hatte, aber nach dem Abrufen des Ajax nicht fehlschlug. Vielen Dank – arlyon

Sie müssen sicherstellen, dass das Buch-Komponente installiert ist, hat die Buchdaten von dem Host-Element erfolgreich erhalten worden ist, so dass Sie das Buch verwenden können, so:

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

Quelle

2017-02-18 17:00:46 Surmon

VueJS prop verhält sich unerwartet

Antwort

Verwandte Themen