Как добавлять данные в массив с v-model?

Question

[pavelkunyavskiy]

Есть такая data

data () {
    return {
      content: [
        {
          text: '',
          image: '',
          caption: ''
        }
      ]
    }
  }

И разметка

<input type="text" v-model="content.text">
<input type="text" v-model="content.image">
<input type="text" v-model="content.caption">
<button @click="submitData">submit</button>

В данном виде ничего не работает. Почему и как добавлять данные, например в массив content.text?

И что если надо добавить несколько объектов в массив content? Как тогда быть? Какая разметка должна быть, как Вью будет разделять какому объекту принадлежит каждый инпут?

Answer 1

[Evgeny Kulakov]

Берете v-for директиву, рендерите список элементов:

<div v-for="item in content">
<input type="text" v-model="item.text">
<input type="text" v-model="item.image">
<input type="text" v-model="item.caption">
</div>

Comments

[pavelkunyavskiy]

Все оказалось проще чем я думал. Спасибо!

Answer 2

[Александр Дроздов]

Ну тебе надо пройтись циклом по content и присвоить v-model="content[k].text" для каждого инпута, примерно

Comments

[pavelkunyavskiy]

Примерно - да, так. Спасибо))