JSFiddle - React, Tailwind, and code Playground

by greggpollack

HTML

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
<body>

  <div id="app" class="section content">

    <h1 class="title">Packing List</h1>

    <travel-item v-for="travelItem in travelItems" :item="travelItem"></travel-item>

    <h2>You have {{totalItems()}} items:</h2>
    <ul>
      <li v-for="item in travelItems">
        {{item.quantity}} {{item.name}}
        <span v-if="item.quantity == 0">(Don't forget this)</span>
      </li>
    </ul>
  </div>

  <template id="travel-item-template">
    <div class="box">
      <article class="media">
        <div class="media-content is-size-4">
          {{item.name}}
        </div>
        <div class="media-right">
          <input class="input is-primary" type="text" size="3" v-model="item.quantity">
        </div>
        <div class="media-right">
          <a class="button is-primary" @click="item.quantity = parseInt(item.quantity) + 1">Add</a>
        </div>
      </article>
    </div>
  </template>

</body>

JavaScript

Vue.component('travelItem', {
  template: '#travel-item-template',
  props: ['item']
})
var app = new Vue({
  el: '#app',
  data: {
    travelItems: [{
      name: "Energy Bars",
      quantity: 3
    }, {
      name: "Sunglasses",
      quantity: 1
    }, {
      name: "Swim Suits",
      quantity: 0
    }, {
      name: "Shorts",
      quantity: 2
    }]
  },
  methods: {
    totalItems: function() {
      var sum = 0;
      this.travelItems.forEach(function(item) {
        sum += parseInt(item.quantity)
      });
      return sum;
    }
  }
});