在 v-for 循环中将 textarea 的 v-model 绑定到 Vue.js 中的数组答案

【问题标题】：Bind v-model of textarea to array in Vue.js in v-for loop在 v-for 循环中将 textarea 的 v-model 绑定到 Vue.js 中的数组
【发布时间】：2019-03-27 16:50:09
【问题描述】：

我想将一个数组绑定到一个 textarea，其中 textarea 中的每一行都是数组中的一个元素。我不知道如何解决这个问题。我已经尝试使用v-:change 方法和临时v-model 进行更新，但这很脏。

例如：

<div v-for="item, index in list">
<b-form-textarea v-model.trim="list[index]"></b-form-textarea>
</div>

结果应如下所示：

list[0] = ['row1 of textarea 1', 'row 2 of textarea 1', ...]
list[1] = ['row1 of textarea 2', 'row 2 of textarea 2', ...]

【问题讨论】：

您只能使用 v-model 将整个 textarea 内容绑定到数据属性，您可以使用计算属性从列表中更新 textarea，并使用 watch 属性从 textarea 内容中更新列表跨度>
是的，我不得不说我对 vue.js 还是很陌生，但我找到了一种使用带有 getter 和 setter 的计算属性的方法。但我没有设法将它与 v-for 一起使用

标签： javascript vue.js vuejs2 bootstrap-vue

【解决方案1】：

您可以将每个文本区域的输入值保存在一个对象中，这些对象被收集在一个数组中。

可以通过计算属性处理此数组以获得所需的结构 - 在您的情况下为 split("\n")。

var app = new Vue({
  el: '#app',
  data: {
    list: [{
        id: 1,
        value: ""
      },
      {
        id: 2,
        value: ""
      },
    ]
  },
  computed: {
    listByBreaks() {
      return this.list.map(e => {
        return e.value.split("\n");
      });
    }
  }
})

<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<!-- Required Stylesheets -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

<!-- Required scripts -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>


<div id="app">
  <div v-for="item in list" :key="item.id">
    <b-form-textarea v-model="item.value"></b-form-textarea>
    <br/>
  </div>
  List by breaks: {{ listByBreaks }}
</div>

【讨论】：