How Do I Push Items Into An Array In The Data Object In Vuejs? Vue Seems Not To Be Watching The .push() Method
I am attempting to add objects into an array I declared in Vue instance data object. I can set the values in the state's purchase object, but when I push data into the orders queue
Solution 1:
The push()
method ought to add purchase
objects to the queue
array, but as @FK82 pointed out in his comment, push()
is adding multiple references to the same purchase
object. This means that if you change the object by increasing the quantity
, every purchase
's quantity
property will be updated.
You can give that a try here:
const exampleComponent = Vue.component("example-component", {
name: "exampleComponent",
template: "#example-component",
data() {
return {
queue: [],
purchase: {
product: null,
customer: null,
quantity: null
}
};
},
methods: {
queuePurchase() {
this.queue.push( this.purchase );
}
}
});
const page = newVue({
name: "page",
el: ".page",
components: {
"example-component": exampleComponent
}
});
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script><templateid="example-component"><div><p>The Queue has {{ this.queue.length }} items.</p><inputv-model="purchase.quantity"type="number"min="1"name="product"placeholder="Quantity"
><button @click="queuePurchase">
Add to Queue
</button><pre>{{ JSON.stringify(this.queue, null, 2) }}</pre></div></template><divclass="page"><example-component></example-component></div>
Instead of push()
ing a reference to the same purchase
object, try creating a shallow copy with Object.assign({}, this.purchase)
or by using the spread operator. Here's an example that uses the spread operator and then push()
es the copy onto the queue
:
const exampleComponent = Vue.component("example-component", {
name: "exampleComponent",
template: "#example-component",
data() {
return {
queue: [],
purchase: {
product: null,
customer: null,
quantity: null
}
};
},
methods: {
queuePurchase() {
this.queue.push({...this.purchase});
}
}
});
const page = newVue({
name: "page",
el: ".page",
components: {
"example-component": exampleComponent
}
});
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script><templateid="example-component"><div><p>The Queue has {{ this.queue.length }} items.</p><inputv-model="purchase.quantity"type="number"min="1"name="product"placeholder="Quantity"
><button @click="queuePurchase">
Add to Queue
</button><pre>{{ JSON.stringify(this.queue, null, 2) }}</pre></div></template><divclass="page"><example-component></example-component></div>
Post a Comment for "How Do I Push Items Into An Array In The Data Object In Vuejs? Vue Seems Not To Be Watching The .push() Method"