var app = new Vue({ el: "#app", data: { phone: [{ id: "1", name: 'Iphone 4S', price: '300', count: "0" }, { id: "2", name: 'Xiaomi', price: '200', count: "0" }, { id: "3", name: 'vivo X20', price: '320', count: "0" }], addcart: [] }, methods: { lessClick(item) { if (item.count > 0) { item.count-- const index = this.addcart.indexOf(item.name) if (index > -1) { const removedName = this.addcart.splice(index, 1) console.log("remove:", removedName) } } }, addClick(item) { item.count++ console.log("add:", this.addcart.push(item.name)) } } })
<div id="app"> <ul> <li v-for="(item,index) in phone"> Product name: {{item.name}} <br>Product price:{{item.price}} <br> <a class="a-less" @click="lessClick(item)">-</a> <input type="text" v-model="item.count"> <a class="a-add" @click="addClick(item)">+</a> </li> </ul> </div>