Im pretty new to Vue and have been trying edit an array of strings using the v-model property. I've created a small jsfiddle and am having issue editing the array. An error pops up saying I should be using an object when using v-model but when I hit the delete button it seems so know its been edited. also adding a new input field will reset the previous ones.
what is the best way to about this editing an array and keeping it in the same format
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
}
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]">
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">
