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.

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

	<!--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 v-for="myproduce in realmyproduces" class="list-group-item">
						{{ myproduce.name }} {{ myproduce.price }}
						<div class="pull-right">
							<button v-show="notInCart(myproduce)" v-on:click=" addToCart(myproduce)" class="btn btn-xs btn-primary">
								+
							</button>
							<span v-show="!notInCart(myproduce)" 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 v-text="All total"></span>)
				  </div>
				  <div class="panel-body">
					  <span v-show="!mycount" class="text-muted">Cart empty</span>
						<li v-for="item in my_RealCartitem" class="list-group-item">
							{{ item.qty }} × {{ item.name }} {{ item.price }}
							<div class="pull-right">
								<button v-on:click="deleteQty(item)" class="btn btn-xs btn-default">
									-
								</button>
								<button v-on:click="addRealQty(item)" 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;
}

Demo Example