javascript - vuejs 列表渲染出商品，点击添加按钮，怎么让当前列表的数量增加？

问题描述

问 题

//代码

<div class="foods-wrappper">
            <ul>
                <li v-for="item in goods" class="food-list">
                    <h3 class="title">{{item.name}}</h3>
                    <ul class="content-list">
                        <li v-for="food in item.foods">
                            <div class="foods-img">
                                <img :src="food.icon" alt="">
                            </div>
                            <div class="foods-content">
                                <p class="foods-name">{{food.name}}</p>
                                <p v-show="food.description" class="foods-desc">{{food.description}}</p>
                                <p class="foods-sell"><span>月售{{food.sellCount}}</span><span class="foods-ratings">好评率{{food.rating}}%</span></p>
                                <p class="foods-price"><span class="price"><i>￥</i>{{food.price}}</span><span v-show="food.oldPrice" class="old-price"><i>￥</i>{{food.oldPrice}}</span></p>
                            </div>
                            <div class="operate-bar">
                                <span v-show="foodNum>0" class="cut icon-remove_circle_outline" @click="cartCut()"></span>
                                <span v-show="foodNum>0" class="food-num">{{foodNum}}</span>
                                <span class="add icon-add_circle" @click="cartAdd($index,$event)"></span>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    <script>
import iconTitle from 'components/icon-title/icon-title.vue'
export default {
    props: {
        seller: {
            type: Object
        }
    },
    data () {
        return {
            goods: [],
            isActive: -1,
            foodNum: 0
        }
    },
    methods: {
        cartAdd (index, event) {
            console.log(index)
            console.log(event.currentTarget)
            this.foodNum ++
        },
        cartCut () {
            this.foodNum --
        }
    }
}

</script>

解决方案

这种一般要维护两个数组，一个是所有菜品的数组，一个是购物车的数组。不管是增，改，删。都是去操作这两个数组的内容。比如菜品数组为：goods,购物车为：card。add的时候往card里Push这个菜品，同时修改goods里对应菜品的数量。

这篇关于javascript - vuejs 列表渲染出商品，点击添加按钮，怎么让当前列表的数量增加？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！