[Vue.js] Deleting Items and Modifiers //HTML - //JS methods: { deleteItem: function(id) { if(this.cart[id].qty > 1){ this.cart[id].qty--; } else { this.cart.splice(id, 1); //remove JS object } } } //modifiers make Bootstrap menu interesting and fun Vue.js 2022.05.11
[Vue.js] Adding computed classes //JS computed: { cartTotal: function() { let sum = 0; for (key in this.cart) { sum = sum+this.cart[key].product.price * this.cart[key].qty); } return sum; }, cartQty: function() { let qty = 0; for (key in this.cart) { qty = qty+this.cart[key].qty); } return qty; } } Vue.js 2022.05.11
[Vue.js] Categorizing lists //HTML {{item.product.price | currency}} methods: { addItem: function(product) { var whichProduct; var existing = this.cart.filter(function(item, index) { if (item.product.id == Number(product.id)) { whichProduct = index; return true; } else { return false; } }); if (existing.length) { this.cart[whichProduct].qty++; }else { this.cart.push({product: product, qty: 1}) } } } Vue.js 2022.05.11
[Vue.js] Toggling elements with a key {{item.qty}} {{item.name}} {{item.price |currency}} //Use Bootstrap Features Vue.js 2022.05.11
[Vue.js] filters filters: { currency: function(value) { return Number.parseFloat(value).toFixed(2); } } // defined out of main component // ex: Vue.filter('currency', function() { }) // They can be chained // filters are available in any v-bind Vue.js 2022.05.11
[Vue.js] Buefy, Vuetify Art Libraries: Bulma Basic Framework Import it and classes for Raw HTML BootStrap Buefy Bulma + Vue Vuetify: These libraries help us with designing websites. (Component Libraries) Vue.js 2022.05.11
[Screen Sharing] Nuxt and SSR (Server Side Rendering) EC2 Instance or a Docker Container Running and make HTTP Requests on them. (Vue.js) Nuxt Helps with SSR Make it easy to search for Google (SEO Optimization) SEO Reads the first thing (Don't have to wait) File System Routing Rending Modes Data Fetching Dev Mode Rerendering >> helps with editing certification >> url is the valid one Where to work /src/pages/ Supports the page stuff BYU-Broadcast/ScreenSharing 2022.05.11
[Vue.js] Basics with Vue.js v-bind: get the value v-model: both change v-if: is showing or not v-on: Manage events from the method part Lifecycle Hooks mounted Application ready to display mounted: function() { fetch('https://hplussport.com/api/products/order/price') .then(response => response.json()) .then(data => { this.products = data; }) } Methods: Where to define functions Vue.js 2022.05.10