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以添加网址，则可以尝试this之类的内容。

如何使用基于多个输入的vue.js更新textarea

1 个答案: