JSFiddle - React, Tailwind, and code Playground

by zhouyulong

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <ul>
    <li v-for="item in foods">
      {{item.name}}
      <br>
      <a @click="lessClick(item)">-</a>
      <input type="text" :value="item.quantity">
      <a @click="addClick(item)">+</a>
    </li>
  </ul>
  <hr>
  <ul>
    <li v-for="item in addfood">
      {{item.name}}
      <br>
      <span>{{item.quantity}}</span>
    
    </li>
  </ul>
  
</div>

JavaScript

const foods = [{
  id: "1",
  name: "Daikon",
  quantity: "0"
}, {
  id: "2",
  name: "Mushroom",
  quantity: "0"
}, {
  id: "3",
  name: "Coriander",
  quantity: "0"
}]
var app = new Vue({
  el: "#app",
  data: {
    foods: foods,
    addfood: []
  },

  methods: {
  lessClick(item){
   console.log("remove：", this.addfood.splice(item,1))
        item.quantity -= 1;
  },
    addClick(item) {
        console.log("add：", this.addfood.push(item))
        item.quantity += 1;
    }
  }
})