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

by

1👍

✅

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.

👤Diamond

Leave a comment