javascript - 在 vue.js 中声明响应式(Reactive)数据属性？

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 block 却没有:

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

[Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

我使用的是 Vue v2.3.3。可能是什么问题？

Answer 1

如documentation说，文本区域中的插值不起作用，因此您需要使用 v-model。

如果你唯一想做的就是在textarea中显示html，理论上你可以使用一个丑陋的解决方法，将数组字段包装在一个函数中并将该函数设置为textarea v-model:

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 不应该以这种方式生成(尤其是较大的 block )。

jsFiddle preview