Question

我想将一个数组绑定到一个 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', ...]

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

在v-for循环中将textarea的v模型绑定到Vue.js中的数组

1 个答案: