VueJs add json object to array – VueJs push data into array Example

VueJs add json object to array – VueJs push data into array Example

Simple One can send here Supported POST data, PUT data, PATCH data, and DELETE data requests just as easily.

[php]
this.$set(this.attendees, data.userToken, data);
[/php]

Vue.set( target, key, value ) with Example

Arguments:
[php]

{Data Object | Array} target
{Data string | number} key
{Data any} value

[/php]

include The Libs..
[php]
jquery-2.1.4.min.js
bootstrap.min.js
underscore-min.js
bootstrap.min.css
[/php]

index.html

[php]

[/php]

index.js

[php]
var v = new Vue({
el: ‘body’,
data: {
realmyproduces: [
{‘id’: 1, ‘name’: ‘myproduce 1’, ‘price’: 12.95},
{‘id’: 2, ‘name’: ‘Other myproduce’, ‘price’: 4.35}
],
my_RealCartitem: []
},
computed: {
mycount: function() {
return this.my_RealCartitem.length;
},
All total: function() {
return _.reduce(this.my_RealCartitem, function(n, cart_item) {
return cart_item.price * cart_item.qty + n;
}, 0).toFixed(2);
}
},
methods: {
notInCart: function(myproduce) {
var ids = _.pluck(this.my_RealCartitem, ‘id’);
return !_.contains(ids, myproduce.id);
},
addToCart: function(myproduce) {
var cart = Vue.util.extend({}, myproduce);
var ids = _.pluck(this.my_RealCartitem, ‘id’);

if (!_.contains(ids, myproduce.id)) {
cart.qty = 1;
this.my_RealCartitem.push(cart);
}
},
addRealQty: function(myproduce) {
myproduce.qty = myproduce.qty +1;
},
deleteQty: function(myproduce) {
myproduce.qty -= 1;
if (myproduce.qty <= 0) {
this.my_RealCartitem.$remove(myproduce);
}
}
}
});
[/php]

style.css

[php]
body {
background-color: #D3D3D3;
}
[/php]

Demo Example