JSFiddle - React, Tailwind, and code Playground

by Alex Kyriakidis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.23/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
  <div class="container">
    <h1>Gem Market</h1>
    <cart :gems.sync="quantity"></cart>
    <hr>
    <div>
      <h3>You have to pay <strong>{{ gold }}</strong> pieces of gold.</h3>
    </div>
  </div>

  <template id="cart-template">
    <h2>How many gems would you like to buy?</h2>
    <p>1 emerald costs 100 pieces of gold.</p>
    <input v-model="gems" class="form-control" number>
  </template>
</body>

JavaScript

Vue.component('cart', {
  template: "#cart-template",
  props: {
    gems: 0
  }
});

new Vue({
  el: '.container',
  data: function() {
    return {
      quantity: 0
    };
  },
  computed: {
    gold: function() {
      return this.quantity * 100
    }
  }
})