如何基于多个输入使用 vue.js 更新文本区域

Question

正如标题所说，我正在尝试根据多个输入更新textarea。我使用 jQuery 使该部分工作（带有换行符），但是当我尝试获取该 textarea 的值并使用 vue.js 将其显示在其他地方时，它不起作用。更奇怪的是，当我编辑 vue.js 数据绑定字段时，它会删除 textarea 直到重新编辑输入。我是 vue.js 的新手，所以我对这里发生的事情有点困惑。任何帮助表示赞赏。

这是一个Fiddle，代码与以下相同：

$(document).ready(function() {
  $(document).on('change keyup', 'input.url-field', function() {
    var inputs = $('input.url-field');
    var textareaVal = '';
    for (var i = 0; i < inputs.length; i++) {
      textareaVal += $(inputs[i]).val() + "\r\n";
    }
    $('textarea#urls').val(textareaVal);
  });
  // vue.js app
  new Vue({
    el: '#all',
    data: {
      phone: '',
      urls: ''
    }
  });
});

input, textarea{
  margin-bottom: 20px;
  display: block;
}

<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="all">
  <form>
    <label>Phone:</label>
    <input name="phone" v-model="phone" type="text">
    <label>URL1:</label>
    <input class="url-field" name="url1" type="text">
    <label>URL2:</label>
    <input class="url-field" name="url2" type="text">
    <textarea id="urls" name="urls" v-model="urls" cols="50" rows="5"></textarea>
  </form>
  <br>
  <table>
    <tr>
      <td><strong>Phone:</strong></td>
      <td>{{ phone }}</td>
    </tr>
    <tr>
      <td><strong>URLs:</strong></td>
      <td>{{ urls }}</td>
    </tr>
  </table>
</div>

Answer 1

假设您将textarea 用作显示字段。尝试这个。本质上，放弃使用 jQuery，让 Vue 管理textarea。

new Vue({
  el: '#all',
  data: {
    phone: '',
    url1: null,
    url2: null
  },
  computed:{
      urls(){
        return [this.url1, this.url2].join("\r\n")
      }
  }
});

更新fiddle。

如果您希望能够编辑 textarea 以添加 url，您可以尝试类似this。