javascript - 如何使用vue.js添加购物车？

我试图添加购物车，但我不知道该怎么做。当count = 0，-隐藏时。当显示count > 0，-时。当我尝试单击+时，自动增加1，单击-自动减少1。但是无法显示。jsfiddle

看一下Javascript文件：

const goods = [{
  id: "1",
  goods_name: "水立方",
  goods_price: "30.00",
  goods_num: "15",
  count:"0"
}, {
  id: "2",
  goods_name: "农夫山泉",
  goods_price: "28.00",
  goods_num: "10",
  count:"0"
}]

var app = new Vue({
  el: "#app",
  data: {
    list: goods,
  },
  methods: {
  addCart(item,event) {
        if (!this.item.count) {
          Vue.set(this.item, 'count', 1);
        } else {
          this.item.count++;
        }
      },
  lessCart(event) {
        this.item.count--;
      }
  }
})

HTML档案：

<div id="app">
  <ul>
    <li v-for="item in list">
      <p>{{item.goods_name}}</p>
      <p>{{item.goods_price}}</p>
      <a v-show="item.count > 0" @click.stop.prevent="lessCart(item,$event)">-</a>
      <input v-show="item.count > 0" v-model="item.count">
      <a @click.stop.prevent="addCart(item,$event)">+</a>
    </li>
  </ul>
</div>

最佳答案

您每次都在更改相同的状态，而不是列表中的状态。

您应该简单地做：

   const goods = [{
  id: "1",
  goods_name: "水立方",
  goods_price: "30.00",
  goods_num: "15",
  count:"0"
}, {
  id: "2",
  goods_name: "农夫山泉",
  goods_price: "28.00",
  goods_num: "10",
  count:"0"
}]

var app = new Vue({
  el: "#app",
  data: {
    list: goods,
  },
  methods: {
    addCart(item) {
      item.count++;
    },
    lessCart(item) {
      item.count--;
     }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <ul>
<li v-for="item in list">
  <p>{{item.goods_name}}</p>
  <p>{{item.goods_price}}</p>
  <a v-show="item.count > 0" @click.stop.prevent="lessCart(item)">-</a>
  <input v-show="item.count > 0" v-model="item.count">
  <a @click.stop.prevent="addCart(item)">+</a>
</li>
  </ul>
</div>

请注意，您的方法不需要事件参数。