javascript - When the vuejs list renders products and clicks the add button, how to increase the number of the current list?

Question

//Code

<p 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">
                            <p class="foods-img">
                                <img :src="food.icon" alt="">
                            </p>
                            <p 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>
                            </p>
                            <p 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>
                            </p>
                        </li>
                    </ul>
                </li>
            </ul>
        </p>
    <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>

Answer 1

This generally requires maintaining two arrays, one is the array of all dishes, and the other is the array of the shopping cart. Whether it is adding, changing or deleting. All are used to operate the contents of these two arrays. For example, the dish array is: goods, and the shopping cart is: card. When adding, push this dish into the card and modify the quantity of the corresponding dish in goods.

Answer 2

Simple

this.goods.push({
// goods info
});

Answer 3

The appearance of the list is obtained by looping the data in good, so if you want to add a record, you must add a record to the looped target. The code is written on the second floor so I won’t be verbose.