vue.js購物車添加商品組件的方法
現(xiàn)實向購物車添加商品組件
代碼
<template> <div class="cartcontrol"> <!--商品減一區(qū)域--> <div class="reduce" v-show="food.count>0"> <i class="icon-remove_circle_outline"></i> </div> <!--商品數(shù)量區(qū)域--> <div class="num" v-show="food.count>0">4</div> <!--商品加一區(qū)域--> <div class="add" @click="addCart"> <i class="icon-add_circle"></i> </div> </div> </template>
<script> export default { name: "Cartcontrol", props:{ food:{ type:Object } }, methods:{ //添加購物車商品數(shù)量 addCart(ele){ if(!ele._constructed){ //better-scroll的派發(fā)事件scroll的event和pc端瀏覽器的點擊事件的event有個 // 屬性區(qū)別_constructed,pc端瀏覽器的點擊事件的event中是沒有這個屬性的 return; } //一開始food中是沒有商品數(shù)量count if(!this.food.count){ // this.food.count = 1;count不是food對象中的屬性,直接這樣寫,在dom渲染的時候是無法感應到count的變化 this.$set(this.food,'count',1); }else{ this.food.count++; } console.log(this.food.count); } } } </script>
<style scoped lang="stylus"> .cartcontrol display flex height .48rem align-items center .num font-size.2rem width .48rem text-align center color rgb(147,153,159) .reduce,.add font-size .4rem color rgb(0,160,220) </style>
對象中添加新的屬性,如果更新此屬性的值,是不會更新視圖的
addCart(ele){ if(!ele._constructed){ //better-scroll的派發(fā)事件scroll的event和pc端瀏覽器的點擊事件的event有個 // 屬性區(qū)別_constructed,pc端瀏覽器的點擊事件的event中是沒有這個屬性的 return; } //一開始food中是沒有商品數(shù)量count if(!this.food.count){ this.food.count = 1;count不是food對象中的屬性,直接向food添加新屬性count, // 當count值發(fā)生變化的時候在dom渲染的時候是無法感應到count的變化 }else{ this.food.count++; } console.log(this.food.count); }
解決方法:使用$set可以觸發(fā)更新視圖,這樣當count發(fā)生變化的時候,$set去觸發(fā)更新視圖 addCart(ele){
if(!ele._constructed){ //better-scroll的派發(fā)事件scroll的event和pc端瀏覽器的點擊事件的event有個 // 屬性區(qū)別_constructed,pc端瀏覽器的點擊事件的event中是沒有這個屬性的 return; } //一開始food中是沒有商品數(shù)量count if(!this.food.count){ // this.food.count = 1;count不是food對象中的屬性,直接向food添加新屬性count, // 當count值發(fā)生變化的時候在dom渲染的時候是無法感應到count的變化 this.$set(this.food,'count',1); }else{ this.food.count++; } console.log(this.food.count); }
總結
以上所述是小編給大家介紹的vue.js購物車添加商品組件的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
相關文章
el-tree使用獲取當前選中節(jié)點的父節(jié)點數(shù)據(jù)
本文主要介紹了el-tree使用獲取當前選中節(jié)點的父節(jié)點數(shù)據(jù),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-10-10Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化
這篇文章主要為大家詳細介紹了Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03Vue+ElementUI?實現(xiàn)分頁功能-mysql數(shù)據(jù)
這篇文章主要介紹了Vue+ElementUI?實現(xiàn)分頁查詢-mysql數(shù)據(jù),當數(shù)據(jù)庫中數(shù)據(jù)比較多時,就每次只查詢一部分來緩解服務器和頁面壓力。這里使用elementui的?Pagination?分頁?組件,配合mysql的limit語句,實現(xiàn)分頁查詢mysql數(shù)據(jù),下面來看看具體實現(xiàn)過程,希望對大家學習有所幫助2021-12-12vue3如何使用provide實現(xiàn)狀態(tài)管理詳解
Vue3中有一對新增的api,provide和inject,熟悉Vue2的朋友應該明,這篇文章主要給大家介紹了關于vue3如何使用provide實現(xiàn)狀態(tài)管理的相關資料,需要的朋友可以參考下2021-10-10