JSFiddle - React, Tailwind, and code Playground

by Robodude

HTML

<div id="app">
<table>
<tr v-for="item in records">
  <td> {{ item.name }} </td>
  <td> ${{ item.price }} </td> 
  <td> {{ item.quantity }} </td>   
  <td> <button v-on:click="recordAdd(item)">+</button> </td>      
  <td> <button v-on:click="recordRemove(item)">-</button> </td>      
</tr>   
</table>
</div>

JavaScript

var vm = new Vue({
 		el: "#app",
  		data: {
  		records: [
      	{name: "Record A", price: 9.99, quantity: 10},
    		{name: "Record B", price: 8.99, quantity: 6}]
  		},
      methods: {
  			recordAdd(item) {
  				item.quantity += 1;
  			},
  			recordRemove(item) {
  				item.quantity -= 1;
          
          if (item.quantity <= 0){
  					this.records.splice(this.records.indexOf(item), 1);
          }
          
  			}
			}
});