Проблема с Vue js при передаче v-модели в виде массива к компонентам?

Question

Я новичок в vuejs и застрял с этой проблемой. Ссылка на код: https://jsfiddle.net/cdq8xu9t/

JS

Vue.component('jk',{
    props:['value'],
template:`
    <div v-for="val in value">
        <input type="text" v-bind:value="val.a" v-on:input="$emit('input',$event.target.value)">
        <input type="text" v-bind:value="val.b" v-on:input="$emit('input',$event.target.value)">
    </div>
`
});

new Vue({
el: '#app',
data: {
    message: 'Hello Vue.js!',
    add:[{
        a:'apple',
    b:'orange'
    }]
}
})

HTML

<div id="app">
  <p>{{ message }}</p>
  <jk v-model="add"></jk>
</div>

Проблема заключается в следующем. Компоненты генерируются, но когда я изменяю значения, что-то идет не так.

Я использовал дополнение vue-js в chrome и обнаружил, что когда я изменяю значения в поле ввода, объект добавления становится строкой. Может кто-нибудь предложить исправить. Пожалуйста.

Answer 1

Вы допустили ошибку при прохождении реквизита.

<div id="app">
  <p>{{ message }}</p>
  <jk :value="add"></jk>
</div>

И вам нужно добавить unqiue key для каждого элемента при использовании v-for.

    <div
      v-for="val in value"
      :key="val.id" // recommended :)
    >
        <input type="text" v-bind:value="val.a" v-on:input="$emit('input',$event.target.value)">
        <input type="text" v-bind:value="val.b" v-on:input="$emit('input',$event.target.value)">
    </div>

Иногда разработчикииспользуйте index в качестве key, но это не рекомендуется.

    <div
      v-for="(val, index) in value"
      :key="index" // not recommended :(
    >

Вот полный код .