Confuse in list rendering when add remove action in Vuejs

Question

I have a array of quote items that created dynamically by user. By default there is an item in list. When I click on new item, a null object push to array. Until now every things is OK, but when I add 3rd record, 2nd and 3rd record confuse to each other and every things that change in 3rd record as real time apply to 2nd record. It's my sample code:

https://codepen.io/anon/pen/gXZLZy

This problem has raised after adding the deletion function

What should I do?

Ossip · Accepted Answer · 2017-12-01 00:33:20Z

1

you are pushing a copy of the same object on the list - so you need to copy/clone it, otherwise it will just be a reference to the same object. This seems to be the easiest way to do so:

        this.quote_items.push(Vue.util.extend({}, this.newItem));

answered Dec 1, 2017 at 0:33

Ossip

1,0458 silver badges20 bronze badges

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

1 Comment

Ossip Over a year ago

I guess it's a duplicate of: stackoverflow.com/questions/30578254/…

Ehsan Ali · Accepted Answer · 2017-12-01 00:36:00Z

0

My problem because of newItem variable that push to array. I change this code:

this.quote_items.push(this.newItem);

to

this.quote_items.push({
            inventory_id: '',
            count: 1,
            fee: 13500000,
            discount: 0,
            sum: 0,
            tax_percent: 9,
            tax_amount: 0,
            total: 0
        });

https://codepen.io/anon/pen/gXZLZy?editors=1010

answered Dec 1, 2017 at 0:36

Ehsan Ali

1,4526 gold badges29 silver badges55 bronze badges

Collectives™ on Stack Overflow

Confuse in list rendering when add remove action in Vuejs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related