vue.js購(gòu)物車添加商品組件的方法
現(xiàn)實(shí)向購(gòu)物車添加商品組件
代碼
<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:{ //添加購(gòu)物車商品數(shù)量 addCart(ele){ if(!ele._constructed){ //better-scroll的派發(fā)事件scroll的event和pc端瀏覽器的點(diǎn)擊事件的event有個(gè) // 屬性區(qū)別_constructed,pc端瀏覽器的點(diǎn)擊事件的event中是沒(méi)有這個(gè)屬性的 return; } //一開(kāi)始food中是沒(méi)有商品數(shù)量count if(!this.food.count){ // this.food.count = 1;count不是food對(duì)象中的屬性,直接這樣寫(xiě),在dom渲染的時(shí)候是無(wú)法感應(yīng)到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>
對(duì)象中添加新的屬性,如果更新此屬性的值,是不會(huì)更新視圖的
addCart(ele){ if(!ele._constructed){ //better-scroll的派發(fā)事件scroll的event和pc端瀏覽器的點(diǎn)擊事件的event有個(gè) // 屬性區(qū)別_constructed,pc端瀏覽器的點(diǎn)擊事件的event中是沒(méi)有這個(gè)屬性的 return; } //一開(kāi)始food中是沒(méi)有商品數(shù)量count if(!this.food.count){ this.food.count = 1;count不是food對(duì)象中的屬性,直接向food添加新屬性count, // 當(dāng)count值發(fā)生變化的時(shí)候在dom渲染的時(shí)候是無(wú)法感應(yīng)到count的變化 }else{ this.food.count++; } console.log(this.food.count); }
解決方法:使用$set可以觸發(fā)更新視圖,這樣當(dāng)count發(fā)生變化的時(shí)候,$set去觸發(fā)更新視圖 addCart(ele){
if(!ele._constructed){ //better-scroll的派發(fā)事件scroll的event和pc端瀏覽器的點(diǎn)擊事件的event有個(gè) // 屬性區(qū)別_constructed,pc端瀏覽器的點(diǎn)擊事件的event中是沒(méi)有這個(gè)屬性的 return; } //一開(kāi)始food中是沒(méi)有商品數(shù)量count if(!this.food.count){ // this.food.count = 1;count不是food對(duì)象中的屬性,直接向food添加新屬性count, // 當(dāng)count值發(fā)生變化的時(shí)候在dom渲染的時(shí)候是無(wú)法感應(yīng)到count的變化 this.$set(this.food,'count',1); }else{ this.food.count++; } console.log(this.food.count); }
總結(jié)
以上所述是小編給大家介紹的vue.js購(gòu)物車添加商品組件的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- vue實(shí)現(xiàn)購(gòu)物車功能(商品分類)
- Vue+Node實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選,添加購(gòu)物車功能詳解
- Vue實(shí)現(xiàn)商品飛入購(gòu)物車效果(電商項(xiàng)目)
- Vue商品控件與購(gòu)物車聯(lián)動(dòng)效果的實(shí)例代碼
- Vue實(shí)現(xiàn)購(gòu)物車的全選、單選、顯示商品價(jià)格代碼實(shí)例
- vue+vant實(shí)現(xiàn)購(gòu)物車全選和反選功能
- vue+vant-UI框架實(shí)現(xiàn)購(gòu)物車的復(fù)選框全選和反選功能
- 基于Vuejs實(shí)現(xiàn)購(gòu)物車功能
- vue實(shí)現(xiàn)購(gòu)物車小案例
- vue實(shí)現(xiàn)商品購(gòu)物車全選反選
相關(guān)文章
el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù)
本文主要介紹了el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10vue如何解決axios請(qǐng)求前端跨域問(wèn)題
vue項(xiàng)目中,前端使用axios與后臺(tái)進(jìn)行數(shù)據(jù)請(qǐng)求或者提交的時(shí)候,如果后臺(tái)沒(méi)有設(shè)置跨域,瀏覽器做數(shù)據(jù)請(qǐng)求的時(shí)候就會(huì)報(bào)錯(cuò),這篇文章主要給大家介紹了關(guān)于vue如何解決axios請(qǐng)求前端跨域問(wèn)題的相關(guān)資料,需要的朋友可以參考下2021-10-10vscode 開(kāi)發(fā)Vue項(xiàng)目的方法步驟
這篇文章主要介紹了vscode 開(kāi)發(fā)Vue項(xiàng)目的方法步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11vue+element實(shí)現(xiàn)圖片上傳及裁剪功能
這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)圖片上傳及裁剪功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化
這篇文章主要為大家詳細(xì)介紹了Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03Vue+ElementUI?實(shí)現(xiàn)分頁(yè)功能-mysql數(shù)據(jù)
這篇文章主要介紹了Vue+ElementUI?實(shí)現(xiàn)分頁(yè)查詢-mysql數(shù)據(jù),當(dāng)數(shù)據(jù)庫(kù)中數(shù)據(jù)比較多時(shí),就每次只查詢一部分來(lái)緩解服務(wù)器和頁(yè)面壓力。這里使用elementui的?Pagination?分頁(yè)?組件,配合mysql的limit語(yǔ)句,實(shí)現(xiàn)分頁(yè)查詢mysql數(shù)據(jù),下面來(lái)看看具體實(shí)現(xiàn)過(guò)程,希望對(duì)大家學(xué)習(xí)有所幫助2021-12-12vue3如何使用provide實(shí)現(xiàn)狀態(tài)管理詳解
Vue3中有一對(duì)新增的api,provide和inject,熟悉Vue2的朋友應(yīng)該明,這篇文章主要給大家介紹了關(guān)于vue3如何使用provide實(shí)現(xiàn)狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2021-10-10