Vue updates all input fields in v-for loop instead of only one

Question

So i'm breaking my head over this one for a couple of hours already, and haven't had success Googling.

I have a v-for loop that iterates over an array of objects. In that v-for loop I render input fields with the name and price of that option. The problem I'm encountering is that if I update one field, they al get updated. It seems like they share the exact same v-model, while that's not true. Here is my HTML

            <div
                v-for="(option, index) in options"
                :key="index"
                class="row w-full mt-2"
            >
                <text-input
                    v-model="option.name"
                    label="Optie"
                    class="col w-1/2"
                />
                <text-input
                    v-model="option.price"
                    label="Prijs"
                    prefix="+ €"
                    class="col w-1/4"
                />
            </div>

        <button
            class="text-gray-700 flex items-center mt-3"
            @click.prevent="addNewOption"
        >
            <icon
                icon="icons/plus-circle"
                class="w-4 h-4 mr-2 icon icon-light"
            /> Add options
        </button>

My js

data() {
    return {
       newOption: {
            name: null,
            price: null,
        },

        options: [],
    };
},
methods: {
      addNewOption() {
        this.options.push(this.newOption);
    },
},

Can you guys spot what I'm doing wrong here?

Thanks in advance!

they all do. You're pushing this.newOption which is a reference to an object. Push this instead {...this.newOption} — A. L
– A. L, Commented May 24, 2020 at 14:13
I believe @A.L says right about it. Also if you have objects inside object you need to extend it with deep copy — halilcakar
– halilcakar, Commented May 24, 2020 at 14:16

Ronald · Accepted Answer · 2020-05-24 14:16:31Z

3

I guess you are adding the same this.newOption object over and over. So if you change one, you change them all because they are the same object. So use a spread operator or better yet, just remove newOptions from the component's state. It does not look like this needs to be reactive state.

data() {
    return {
        options: [],
    };
},
methods: {
    addNewOption() {
        this.options.push({
            name: null,
            price: null,
        });
    },
},

answered May 24, 2020 at 14:16

Ronald

1,0396 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Vue updates all input fields in v-for loop instead of only one

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related