Bind v-model of textarea to array in Vue.js in v-for loop

Question

I want to bind an array to a textarea where each line in this textarea is one element in the array. I have no idea how to solve that. I already tried using a v-:change method combined with a temporary v-model to update, but that's pretty dirty.

For example:

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

Result should look like:

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

You could only bind the whole textarea content to a data property using v-model, you could use computed property to update the textarea from your list and watch property to update the list from the textarea content — Boussadjra Brahim
– Boussadjra Brahim, Commented Oct 23, 2018 at 12:44
yes, I have to say I am pretty new to vue.js but I found an approach using computed property with getter and setter. But I didn't manage to use this together with v-for — mrvnklm
– mrvnklm, Commented Oct 23, 2018 at 12:52

Bennett Dams · Accepted Answer · 2018-10-23 13:07:59Z

You could save the input value of each textarea in an object, which are collected in an array.

This array could be processed via a computed property to get your desired structure - split("\n") in your case.

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/[email protected]/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>

Collectives™ on Stack Overflow

Bind v-model of textarea to array in Vue.js in v-for loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related