CODEWITHSUNDEEP
vue.jsvuejs2
Pwntastic
Pwntastic

Reputation: 481

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

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

Upvotes: 0

Views: 2889

Answers (3)

Michal Levý
Michal Levý

Reputation: 37813

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]">

Upvotes: 1

Christian Carrillo
Christian Carrillo

Reputation: 2761

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
}

Upvotes: 3

dispake
dispake

Reputation: 3329

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">

Upvotes: 0

Related Questions