javascript - vue拼接方法如何去掉商品名？

Question

我想尝试删除产品名称。当我点击+时，推送方法添加小米的产品名称。然后当点击-时，但是结果是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>

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/