vue.jsで反応的なデータプロパティを宣言しますか？

Question

私は非常に基本的なvue.jsアプリがあります。

var app = new Vue({ 
    el: '#app', 
    delimiters: ['${', '}'], 

    data: { 
    messages: [ 
     'Hello from Vue!', 
     'Other line...' 
    ] 
    } 

}) 

次htmlが正常に動作します：

<div class="container" id="app"> 
    <div class="row" style=""> 
     <div class="col-md-8 offset-md-2"> 
     <span v-for="msg in messages">${msg}</span> 
     </div> 
    </div> 
    </div> 

しかし非常によく似たhtmlブロックにはない：

<div class="container" id="app"> 
    <div class="row" style=""> 
     <div class="col-md-8 offset-md-2"> 
     <textarea id="chat_area" readonly="" rows="20"> 
      <span v-for="msg in messages">${msg}</span> 
     </textarea> 
     </div> 
    </div> 
    </div> 

[ヴューが警告]：プロパティまたはメソッド "msg"がインスタンスに定義されていませんレンダリング中に参照されます。データオプションで無効なデータプロパティを宣言してください。

私はVue v2.3.3を使用しています。何が問題なの？

Answer 1

documentationによると、テキストエリア内の補間は機能しないため、v-modelを使用する必要があります。

あなたがしたい唯一のことは、あなたが理論的には関数内でご使用のアレイフィールドをラップすることにより、醜い回避策を使用してテキストエリアのVモデルとして、その機能を設定することができ、テキストエリア内のHTMLを表示する場合：

var app = new Vue({ 
    el: '#app', 
    delimiters: ['${', '}'], 
    data: { 
    messages: [ 
     'Hello from Vue!', 
     'Other line...' 
    ] 
    }, 
    computed:{ 
    multiLineMessages: function(){ 
     var result = ""; 
     for(var message of this.messages){ 
     result += '<span>' + message + '</span>' 
     } 
     return result; 
     } 
    } 
}); 

テンプレートパーツ：

<div class="container" id="app"> 
    <div class="row" style=""> 
     <div class="col-md-8 offset-md-2"> 
     <textarea v-model="multiLineMessages" placeholder="add multiple lines"> 
     </textarea> 
     </div> 
    </div> 
    </div> 

それよりも、それはなんとかだが、HTMLは、この方法（これの特に大きな塊）を生成すべきではないと私は非常に、どこでもそれを使用することをお勧めしていないことの証明のようなものです。

jsFiddle preview