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.
this.$set(this.attendees, data.userToken, data);
Vue.set( target, key, value ) with Example
Arguments:
{Data Object | Array} target {Data string | number} key {Data any} value
include The Libs..
jquery-2.1.4.min.js bootstrap.min.js underscore-min.js bootstrap.min.css
index.html
E-junkie: Sell digital downloads online
E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!
Also see:
<!--your navigation bar --> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="container"> <a class="navbar-brand"> <i class="glyphicon glyphicon-shopping-cart"></i>Simple Vue.js Real shoping cart Example </a> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-md-4"> <ul class="list-group"> <li class="list-group-item"> {{ myproduce.name }} {{ myproduce.price }} <div class="pull-right"> <button class="btn btn-xs btn-primary"> + </button> <span class="glyphicon glyphicon-ok-circle text-success"></span> </div> </li> </ul> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <span class="glyphicon glyphicon-shopping-cart"></span> All total (<span></span>) </div> <div class="panel-body"> <span class="text-muted">Cart empty</span> <li class="list-group-item"> {{ item.qty }} × {{ item.name }} {{ item.price }} <div class="pull-right"> <button class="btn btn-xs btn-default"> - </button> <button class="btn btn-xs btn-default"> + </button> </div> </li> </div> </div> </div> </div> </div>
index.js
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); } } } });
style.css
body { background-color: #D3D3D3; }