我想尝试删除产品名称。当我点击+
时,推送方法添加小米的产品名称。然后当点击-
时,但是结果是remove:["Iphone 4S"]
。我认为控制台日志应该是remove:["Xiaomi"]
。转到jsfiddle .
看动图:
看图:
查看javascript文件:
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--
console.log("remove:", this.addcart.splice(item.name, 1))
}
},
addClick(item) {
item.count++
console.log("add:", this.addcart.push(item.name))
}
}
})
HTML 文件:
<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>
最佳答案
您使用 splice方法不对。它将要删除的项目的索引作为第一个参数。因此,您首先需要按项目名称查找索引,可能使用 indexOf方法。它应该是这样的:
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)
}
}
},
关于javascript - vue拼接方法如何去掉商品名?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48397235/