Vue: Reacting to input change on array of inputs in v-for

Question

I have an array of values I am setting the initial data value list to. I am using that list to render the values of the array in inputs. I am rendering the value of the input in a v-for using: <input :value="element" />. I tried using v-model but I get the error:

<input v-model="element">: You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object property instead.

    data() {
        let sizeFilterArray = this.$store.getters['main/getSizeFilters'];
        return {
            list: sizeFilterArray,
        }
    },

<draggable v-model="list">
   <div v-for="(element,index) in list" :key="index">
        <div class="element-box">
            <div class="element-input">
                <input :value="element" />
            </div>
        </div>
   </div>
</draggable>

Noah Stahl · Accepted Answer · 2020-08-13 02:03:46Z

3

The error is directing you to use an array of objects instead of values. So, you could modify to:

<draggable v-model="list">
   <div v-for="item in list" :key="item.id">
        <div class="element-box">
            <div class="element-input">
                <input v-model="item.value" />
            </div>
        </div>
   </div>
</draggable>

This assumes your sizeFilterArray is an array of objects like { id: 1, value: someValue }.

answered Aug 13, 2020 at 2:03

Noah Stahl

7,7235 gold badges30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

timmyLtus Over a year ago

thanks! I manipulated my array on the backend to be an array of objects and that worked! thanks!

Collectives™ on Stack Overflow

Vue: Reacting to input change on array of inputs in v-for

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related