Привязать v-модель textarea к массиву в Vue.js в цикле v-for - PullRequest
Новая
       50

Привязать v-модель textarea к массиву в Vue.js в цикле v-for

0 голосов
/ 23 октября 2018

Я хочу связать массив с 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', ...]

1 Ответ

0 голосов
/ 23 октября 2018

Вы можете сохранить входное значение каждой текстовой области в объекте, который собран в массив.

Этот массив может быть обработан через вычисляемое свойство, чтобы получить желаемую структуру - 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>
...