JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<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;
}

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--
            const index = this.addcart.indexOf(item.name)
          if (index > -1) {
            const removedName = this.addcart.splice(index, 1)
            console.log("remove：", removedName)
          }
        }
      },
      addClick(item) {
        item.count++
          console.log("add：", this.addcart.push(item.name))

      }
  }
})