Vue如何删除对应的产品名称？

我想尝试删除对应的产品名称，可是我不太清楚如何正确地删除对应的产品名称。当我点击+的时候，push()方法添加产品名称是Xiaomi。然后当点击-的时候，却结果的是通过splice方法来删除Iphone 4S。我认为应该正确地删除Xiaomi。

看看GIF结果：

看看截图结果：

这样的结果却是：不对的对应的产品名称，应该如何修改正确地对应产品名称就行了

修改之前代码：

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>

CSS文件：

body {
  margin: 0 auto;
}

ul>li {
  padding: 0.2rem;
  list-style-type: none;
  border-bottom: 1px dashed black;
}

.a-less,
.a-add {
  height: 2rem;
  line-height: 2rem;
  padding: 0.1rem;
  margin: 0.1rem;
  border: 1px solid red;
}

.a-less:hover,
.a-add:hover {
  background-color: #0470fd;
  color: #fff;
}

在Stack Overflow网站提出了一个关于Vue如何用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)
    }
  }
}

总结说明：如果找到对应的产品名称就删除应该用的是indexOf方法.

效果如下：