CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Absolute Idiot
Absolute Idiot

Reputation: 27

Issue with Vue js when passing v-model as array to components?

I am new to vuejs and got stuck with this issue. Link to code: 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>

The issue is as follows. The components are generated but when i change the values, something goes wrong.

I used the vue-js addon in chrome and found that when i change the values in the input field, the add object becomes a string. Can anyone suggest a fix. Please.

Upvotes: 0

Views: 1461

Answers (1)

Diamond
Diamond

Reputation: 3428

You made a mistake in passing props.

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

And you need to add an unqiue key for each item when using 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>

Sometimes devs use index as key, but it is not recommended.

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

Here is the full code.

Upvotes: 1

Related Questions