Vue Syntax Fehler

Question

Ich versuche, die Name-Eigenschaft eines Objekts mit Vue auszudrucken.

Hier ist, was ich versucht {{ selectedTopic.name }}, das diesen Fehler wirft Uncaught TypeError: Cannot read property 'name' of null

Wenn ich {{ selectedTopic }} auszudrucken es warten, bis die Daten verfügbar sind und dann ohne Fehler anzuzeigen.

Jetzt verstehe ich, dass die Daten, die ich anfrage, zu diesem Zeitpunkt nicht verfügbar ist, aber warum gibt es einen Fehler? Sollte es nicht einfach warten, bis diese Daten verfügbar sind, wie es für {{ selectedTopic }} tut?

Vue App

var qaSuggest = new Vue({ 
    el: '#qa-suggest', 
    data: { 
     selectedTopic: null, 
     profiles: [] 
    }, 
    mounted() { 
     bus.$on("send-topic", selectedTopic => this.selectedTopic = selectedTopic); 
    }, 
    updated(){ 
     axios.get('/vueprofiles').then(response => this.profiles = response.data); 
     console.log('selectedTopic: ', this.selectedTopic.name); 
    } 
    }); 

HTML

<div id="qa-suggest"> 
    <ul class="list-unstyled"> 
     <li v-for="profile in profiles"> 
      <div class="clearfix" style="border-bottom: 1px solid #ddd; padding: 5px;"> 
     <div class="pull-left"> 
      <img :src="profile.picture" class="img-responsive" style="max-width: 60px; margin-right: 10px;"> 
     </div> 
     <div class="pull-left"> 
      <p style="font-size: 12px; margin-bottom: 0;">{{ profile.category }}/{{ profile.subcategory }}</p> 
      <p><strong>{{ profile.name }}</strong></p> 
     </div> 
     </div> 
    </li> 
</ul> 

Topic: {{ selectedTopic.name }} 

Answer 1

Sie werden die gleiche Art von Fehler, wenn die in einer berechneten Eigenschaft gesetzt wurden. Vue führt den JS-Code nur so aus, wie er ist, ohne jegliche Art von Nullschutz.

In Ihrem Fall würde ich diesen Teil der Vorlage mit einem v-if="selectedTopic" schützen, oder einfach Nullprüfung direkt in der Interpolation verwenden: {{ selectedTopic ? selectedTopic.name : 'No topic selected' }}.

Sie können auch sie auf einen Standardwert, wie ein leeres Objekt {}, initialisieren, aber meiner Meinung nach ist dies fehlerhaft, da selectedTopic jetzt nicht null ist, aber in der Tat kein eigentliches Thema ausgewählt, die den Code erschwert.

Answer 2

Der Fehler ist, weil Sie nicht eine Eigenschaft auf ein Objekt zugreifen können, die Null ist. Stattdessen könnten Sie versuchen

{{ selectedTopic ? selectedTopic.name : '' }} 

Answer 3

Es "wartet" nicht so viel wie zu verstehen, dass undefined sollte eine leere Zeichenfolge sein. Sie könnten selectedTopic mit einem leeren Objekt initialisieren, und Sie würden das Ergebnis erhalten, das Sie suchen.

data: { 
    selectedTopic: {}, 
    profiles: [] 
},