Vue.js Kann die Eigenschaft 'Split' von undefined nicht lesen

Question

Ich zeige Seitenumbrüche innerhalb meiner vue.js Anwendung.

<div class="Message__body__message"> 
    <p v-for="line in message.message.split('\n')" track-by="$index">{{ line }}<br></p> 
</div> 

Aber ich erhalte die Fehlermeldung:

main.js:7382 [Vue warn]: Error when evaluating expression "message.message.split('\n')": TypeError: Cannot read property 'split' of undefined 

Aber message.message nicht leer ist! Ich bekomme sogar das erwartete Ergebnis, also warum wirft es diesen Fehler?

Answer 1

I even receive the expected result, so why does it throw this error?

irgendwann Denn es istundefined. Wenn Sie letztendlich das Ergebnis erhalten, das Sie erwarten, wird es klar definiert, aber das ist später.

Sie könnten Arbeit um es, indem Sie:

v-for="line in (message.message || "").split('\n')" 

... aber es wäre wahrscheinlich besser, auf dem größeren Bild zu schauen, was der Code tut und herausfinden, warum message.message ist undefined manchmal es versucht das zu bewerten.

---

Als Bill Criswell Punkte aus in a comment, könnten Sie für diese eher bei Verwendung als ein in-Vorlage Ausdruck einer computed property auf Ihrem Modell aussehen. Z.B .:

var vm = new Vue({ 
    // ...your other stuff here... 

    // Computed properties: 
    computed: { 
     messageLines: function() { 
      return (this.message.message || "").split("\n"); 
     } 
    } 
}); 

dann

v-for="line in messageLines" 

Answer 2

Die Ansicht Last, wenn die Seite erstmals Last oder message.message Veränderung.

Ich glaube, dass Sie vue Daten auf diese Weise falsch verwenden.

data: function(){ 
    return { 
    message: {} 
    } 
} 

Offensichtlich haben Sie das Nachrichtenattribut in Daten definiert, aber nicht message.message. Also beim ersten Mal, wenn es geladen wird, ist die Nachricht immer noch leer, es hat immer noch nicht Ihre Ajax-Antwort erhalten, so dass es sagt, dass message.message nicht definiert ist. Sie sollten dies in ein geschachteltes Attribut ändern, um einen gültigen Wert festzulegen.

data: function(){ 
    return { 
    message: {message: ''} 
    } 
} 

Sie sollten verstehen, dass die Sicht mindestens 2 mal bekommen machen, zuerst in Daten, andere Zeit eingestellt Standardwert verwenden Sie Zeit, wenn Sie die Nachricht ändern, in Ajax-Rückruf oder eine andere Situation.

Answer 3

message.message ist möglicherweise nicht verfügbar, wenn vue versucht hat, sie zu laden. Anfrage vue, um zu versuchen, message.message nur zu laden, wenn message.message verfügbar ist. Folgendes funktionierte für mich.

<div class="Message__body__message" v-if="message.message"> 
    <p v-for="line in message.message.split('\n')" track-by="$index">{{ line }}<br></p> </div>