Vue.js未定義のプロパティ 'split'を読み取ることができません

Question

vue.jsアプリケーション内でページ区切りを表示しています。

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

しかし、私はエラーが表示されます。

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

しかしmessage.messageは空ではありません！私は期待される結果を受け取ることさえあるのですが、なぜこのエラーを投げるのでしょうか？

Answer 1

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

いくつかの段階で、それはundefinedですので。明らかに、あなたが最終的に期待している結果を得ているなら、それは定義されつつありますが、それは後であります。

あなたは作業によってその周りをやってできます

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

...しかし、おそらく、そのコードのがやって何の大きな絵を見て、なぜmessage.messageを見つけるために良いだろうと、時にはundefinedですそれを評価しようとしています。

---

Bill Criswellとしてポイントin a commentうち、あなたはそのためのモデルではなく、中・テンプレート式にcomputed propertyを使用してで見えるかもしれません。例えば：その後、

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

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

v-for="line in messageLines" 

Answer 2

ビューロードページが初めてロードまたはmessage.message変化です。

このように間違った方法でvueデータを使用していると思います。

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

明らかに、message属性をdataに定義していますが、message.messageは定義していません。最初にロードすると、メッセージはまだ空ですが、それでもあなたのajaxレスポンスは得られないので、message.messageは定義されていません。これをネストされた属性を使用して正当な値を設定するように変更する必要があります。

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

あなたは、ビューは、AJAXコールバックまたは他の状況では、少なくとも2回、あなたがデータに設定された第1時間の使用のデフォルト値、あなたがメッセージを変更する他のレンダリング時間を取得することを理解すべきです。

Answer 3

vueが読み込もうとしたときにmessage.messageを使用できないことがあります。 Message.messageが使用可能な場合にのみ、message.messageのロードを試みるようにvueに要求します。 以下は私のために働いた。

<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>