Der Versuch, "unbestimmt" Warnung in Vue.js

Dies scheint in meinem Browser-Konsole zu verstehen:Der Versuch, "unbestimmt" Warnung in Vue.js

[Vue warn]: Error when evaluating expression "permissions.edit": TypeError: Cannot read property 'edit' of undefined (found in component: <heading>)

Verwandte Code:

{{ permissions | json }} 
<a class="button" v-on:click="toggleEditMode" v-if="permissions.edit">{{ editMode ? 'Save' : 'Edit' }}</a>

Ergebnisse in:

Berechtigungen sind offensichtlich nicht undefiniert. Was ist los? Um die Sache verwirrender zu machen, wenn ich ein literales Objekt an die Komponente übergebe (:permissions="{edit: true}"), verschwindet die Warnung, aber die Ausgabe von json von {{ permissions | json }} sieht genau gleich aus.

Quelle

2016-04-11 fpcjh

Das Problem scheint zu sein, dass Sie die 'edit' Eigenschaft irgendwie so hinzugefügt haben, dass Vue es nicht bemerkt hat. (Der JSON-Filter kümmert sich nicht um die Reaktivität, daher spielt es dort keine Rolle) Wann und wie erstellen/füllen Sie das Berechtigungsobjekt? Ändern Sie es irgendwo, in einem 'ready()' Haken oder etwas? Haben Sie das Objekt 'Berechtigungen' in den Komponenten' data' mit der Eigenschaft 'edit' bereits definiert? Dies sind relevante Informationen, die wir brauchen. –

Es ist eine Serverantwort von vue-resource, erstellt in der 'created()' Methode meines ViewModels. Es wird dem ViewModel mit 'this. $ Set' zugewiesen und als Prop in meiner Vorlage übergeben. – fpcjh

Da gehen wir hin. Der APi-Aufruf mit vue-resource ist asynchron, das heißt, Vue wartet nicht auf den Abschluss, sondern kompiliert die Vorlage weiter, was viel schneller als der API-Aufruf geschieht. Wenn Vue "permissions.edit" auswertet, wurde es noch nicht festgelegt, da der API-Aufruf immer noch im Hintergrund läuft. Sobald dieser Aufruf beendet ist, wird 'Berechtigungen' richtig gesetzt und Ihre Vorlage funktioniert wie erwartet. –

Wie in den Kommentaren zu Ihrem Beitrag erläutert, ist es aufgrund des asynchronen API-Aufrufs in created(), um das Berechtigungsobjekt zunächst zu erhalten.

Ich schlage vor, Sie verwenden etwas wie https://github.com/vuejs/vue-async-data. Es ermöglicht Ihnen, Daten asynchron (z. B. mit vue-Ressource) zu erhalten und gibt Ihnen eine Möglichkeit, Komponenten Inhalt until loading the data has finished zu verbergen.

Obwohl Sie diese leicht simulieren kann auf eigene Faust:

data: function() { 
    return { loaded: false, permissions: {} } 
}, 
created() { 
    return this.$http(...).then(function (result) { 
    this.permissions = result.data.permissions // or however your data is 
    this.loaded = true 
    }) 
}

und in der Vorlage verwenden v-if="loaded" auf einem DIV den Inhalt zu verstecken, bis Berechtigungen tatsächlich geladen werden.

Quelle

2016-04-11 22:11:29

Dies ist, was ich brauchte, immer noch versucht, meinen Kopf um Zwei-Wege-Bindung einzuwickeln. Vielen Dank! – fpcjh

Es ist, weil permissions nicht Vue path Objekt ist. Sobald Sie es als Stütze übergeben, wird es eins, und Sie können es so referenzieren. Können Sie den vollständigen Code für Ihre Komponente zur weiteren Erläuterung bereitstellen?

Quelle

2016-04-11 19:55:40 bartlomieju

Der Versuch, "unbestimmt" Warnung in Vue.js

Antwort

Verwandte Themen