[Vuejs]-Best way to edit Arrays in Vue. v-model issue

by

3👍

✅

i forked your jsfiddle, where basically i changed the binding of the input element to modify it value when the input event is emitted:

<input id="field-option-0" class="input-large form-control" type="text" @input="inputHandler(index, $event)" :value="option">

now you are passing to it handler function the current index of your list and the native $event to set it over your list.

inputHandler(index, e) {
  this.field_data.value_options[index] = e.target.value
}
👤Christian Carrillo

1👍

When you use v-for="(option, index) in field_data.value_options" the option and index are local variables of the loop.

To use an array item with v-model, you must use the original array + index

<input type="text" v-model="field_data.value_options[option]">

👤Michal Levý

0👍

You can do it, but Vue is warning you that you shouldn’t because doing so could create unwanted side effects. Less obvious in a simple case like this one.

The warning’s suggestion is that you should make each array element an object and reference that object’s property instead. That way you maintain the array’s integrity. 

value_options: [
  { key: 1, value: 'testing bro' },
  { key: 1, value: 'yea testing' }
];

Then reference the property instead of the array element itself.

 <div v-for="(option, index) in field_data.value_options">
      <input v-model="option.value">
👤dispake

Leave a comment