JSFiddle - React, Tailwind, and code Playground

by tbrun2014

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<div id = "growler">  
  <table>
    <tr>
      <th style='width:150px'>Beer</th>
      <th style='width:50px'>Price</th>
      <th style='width:30px'></th>
    </tr>
    
    <tr v-for = "beer in beers">
      <td>{{ beer.name }}</td>
      <td>{{ beer.price }}</td>
      <td>        
        <button :click="buy(beer)">buy</button>        
      </td>
    </tr>
    
    <tr>
      <td>SubTotal</td>
      <td>{{subTotal}}</td>
      <td></td>
    </tr>
  </table>
</div>

JavaScript

new Vue({
  el: "#growler",
  data: {
      beers: [
        {name: 'Ahool Ale', price: 2.00}, 
        {name: 'Agogwe Ale', price: 2.38}        
      ],
      shoppingCart: [], 
      subTotal: 0.00        
  }, 
  watch: {
    shoppingCart: function() {
    	console.log('shopping cart watch triggered');
      this.updateSubTotal();
    }
  }, 
  methods: {
    updateSubTotal: function () {
      var s=this.shoppingCart.length;
      var t=0;
      for (var i=0;i<s; i++){
        t += this.shoppingCart[i].price;
      }
      this.subTotal = t;
    }, 
    buy: function (beer) {
    	console.log('beer pushed on array');
      this.shoppingCart.push(beer);
    }
  },   
  beforeCreate: function() {
    console.log('beforeCreate');
  },
  created: function() {
    console.log('created');                    
  },
  beforeMount: function() {
    console.log('beforeMount');                    
  },
  mounted: function() {
    console.log('mounted');                    
  },
  beforeUpdate: function() {
    console.log('beforeUpdate');
  },
  updated: function() {
    console.log('updated');
  },
  beforeDestroy: function() {
    console.log('beforeDestroy');
  },
  destroyed: function() {
    console.log('afterDestroy');
  }
  
});