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?

score 1 · Accepted Answer · answered Dec 01 '17 at 00:33

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 01 '17 at 00:33

Ossip

1,046
8
20

I guess it's a duplicate of: https://stackoverflow.com/questions/30578254/does-vue-js-have-a-built-in-way-to-add-a-copy-of-a-persistent-object-to-a-repeat – Ossip Dec 01 '17 at 00:34

score 0 · Answer 2 · answered Dec 01 '17 at 00:36

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

Confuse in list rendering when add remove action in Vuejs

2 Answers2