How to output an array of inputs in a Vue loop and bind them dynamically to this array?

Question

Vue.js

There is a code:

<div v-for="(item, index) in content" :key="index">
  <input type="text" v-model="content[index]"  class="u-full-width">
</div>

watch: {
    content () {
      console.log(this.content)
    }

It is necessary that after changing the text in any of the inputs from that array, the function in watch is triggered and the array values ​​are updated. But v-model="content[index]" throws an error. How would it be implemented?

Answer 1

https://en.vuejs.org/v2/api/index.html#watch
Look at the deep option .