如何Vue splice方法删除产品名称？

Question

我想尝试删除产品名称。当我点击+时，按方法添加小米的产品名称。然后点击-，结果是{{1}我认为控制台日志应该是remove： ["Iphone 4S"]。转到jsfiddle。

看看gif：

看图片：

查看javascript文件：

remove： ["Xiaomi"]

HTML文件：

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))

      }
  }
})

Answer 1

您使用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)
    }
  }
},

演示： https://jsfiddle.net/8ocwtyL0/7/