Как забиндить поле в этом примере?

Question

[ICUI4CU]

Подскажите, как в данном случае сделать так, чтобы при внесении изменений в поле input[type="text"] эти данные записывались в cart к верному элементу? (cart[index ??].value)

new Vue({
		el: '#example-1',
		data: {
			cart: [],
			items: [
				{"name": "Item 1"},
				{"name": "Item 2", "inputText": true},
				{"name": "Item 3"}
			]
		}
	})

<ul>
	<li v-for="item in items">
		<label>
			<input type="checkbox" value="{{ item }}" v-model="cart">
			{item.name}
		</label>
		<input type="text" v-if="{{ item.inputText }}">
	</li>
</ul>

Answer 1

[Алексей]

<ul>
  <li v-for="(item, index) in items">
    <label>
      <input type="checkbox" value="{{ item }}" v-model="cart[index]">
      {{item.name}}
    </label>
    <input type="text" v-if="{{ item.inputText }}">
  </li>
</ul>

Вам нужно в v-for добавить index и связывать методом v-model="cart[index]" или v-model="cart[index].value" если нужно в свойство value
Советовал бы перед этим создать методом в mounte'e

function fillCard() {
this.items.forEach((item) => {
   this.cart.push('') 
})
}

или

function fillCard() {
this.items.forEach((item) => {
   this.cart.push({
    value: ''
   }) 
})
}

В таком случае v-model="cart[index].value"