” +
“

“,

props: [‘shopCrat’, ‘totalcartsize’, ‘shopcartSubtotal’, ‘billtax’, ‘shptotal’],

data: function() {
return {
newModal: false
}
},

filters: {
customPluralize: function(shopCrat) {
var newName;

if(shopCrat.qty > 1) {
newName = shopCrat.item + “s”;
return newName;
}

return shopCrat.item;
},

totalcartsize: function(shopCrat) {
var totalcartsize = 0;

for (var i = 0; i < shopCrat.length; i++) { totalcartsize += shopCrat[i].qty; } return totalcartsize; } }, methods: { deleteItems: function(item) { vue.shopCrat.$remove(item); vue.shopcartSubtotal = vue.shopcartSubtotal - (item.productprice * item.qty); vue.shptotal = vue.shopcartSubtotal + (vue.billtax * vue.shopcartSubtotal); if(vue.shopCrat.length <= 0) { vue.checkCartData = false; } }, checkoutModal: function() { var myself = this; myself.newModal = true; }, dataHidePopup: function() { var myself = this; myself.newModal = false; } }, events: { "checkoutRequest": function() { var myself = this; myself.checkoutModal(); } } }); Vue.config.debug = false; var vue = new Vue({ el: "#vue", data: { itemsData: [ { sku: 1, item: "laptop", image: "http://infinityknow.com/241793/chimpanzee.jpg", images: [ { image: "http://infinityknow.com/241793/chimpanzee.jpg" }, { image: "http://infinityknow.com/241793/gorilla.jpg" }, { image: "http://infinityknow.com/241793/red-laptop.jpg" }, { image: "http://infinityknow.com/241793/mandrill-laptop.jpg" } ], itemdesc: "This is a laptop", details: "This is where some detailes on laptop would go. This laptop done seent some shit.", productprice: 5.50 }, { sku: 2, item: "computers", image: "http://infinityknow.com/241793/computers.jpg", itemdesc: "This is a computers", details: "This is where some detailes on computers would go. Shout out computers for being adorable.", productprice: 10 }, { sku: 3, item: "DVD", image: "http://infinityknow.com/241793/DVD.jpg", itemdesc: "This is a DVD", details: "This is where some detailes on DVD would go. Damn nature, you DVD.", productprice: 15 }, { sku: 4, item: "pendrive", image: "http://infinityknow.com/241793/dog.jpg", itemdesc: "This is a pendrive", details: "This is where some detailes on pendrive would go. Shout out pendrive for being adorable.", productprice: 5 }, { sku: 5, item: "mouse", image: "http://infinityknow.com/241793/mouse.jpg", itemdesc: "This is an mouse", details: "This is where some detailes on mouse would go. Shout out mouse for being delicious.", productprice: 1 }, { sku: 6, item: "Orange", image: "http://infinityknow.com/241793/orange.jpg", itemdesc: "This is an orange", details: "This is where some detailes on oranges would go. Shout out oranges for being delicious.", productprice: 1.1 }, { sku: 7, item: "Peach", image: "http://infinityknow.com/241793/peach.jpg", itemdesc: "This is a peach", details: "This is where some detailes on peaches would go. Shout out peaches for being delicious.", productprice: 1.5 }, { sku: 8, item: "Mango", image: "http://infinityknow.com/241793/mango.png", itemdesc: "This is a mango", details: "This is where some detailes on mangos would go. Shout out mangos for being delicious.", productprice: 2 }, { sku: 9, item: "Cognac", image: "http://infinityknow.com/241793/cognac.jpg", itemdesc: "This is a glass of cognac", details: "This is where some detailes on cognac would go. I'm like hey whats up, hello.", productprice: 17.38 }, { sku: 10, item: "Chain", image: "http://infinityknow.com/241793/chain.jpg", itemdesc: "This is a chain", details: "This is where some details on chains would go. 2Chainz but I got me a few on.", productprice: 17.38 } ], checkCartData: false, shopCrat: [], shopcartSubtotal: 0, billtax: 0.065, shptotal: 0 } events: { "checkoutRequest": function() { vue.$broadcast("checkoutRequest"); } } }); [/php] Example

I hope you have Got Shopping Cart Application using Vuejs And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.