javascript - vuejs 清單渲染出商品，點選新增按鈕，怎麼讓目前清單的數量增加？

Question

##//程式碼

<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

這種一般要維護兩個數組，一個是所有菜餚的數組，一個是購物車的數組。不管是增，改，刪。都是去操作這兩個陣列的內容。例如菜色數組為：goods,購物車為：card。 add的時候往card裡Push這個菜品，同時修改goods裡對應菜色的數量。

Answer 2

簡單

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

Answer 3

列表的出現是循環good裡面的資料得到的，所以你要加一條，那就要在被循環目標裡面加一條記錄啊。代碼二樓寫了就不囉嗦了。