JSFiddle - React, Tailwind, and code Playground

by robert chang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-beta.3/vue.js"></script>
<div id="app">
  <counter-list></counter-list>
</div>

<template id="counter-list">
  <div>
    <ul>
      <counter v-for="(item, index) in list" :item="item" track-by="index" @update="updateItemCount(index, $event)"></counter>
    </ul>
    <pre>
    {{$data}}
  </pre>
  </div>
</template>

<template id="counter">
  <li>
    <h5>{{item.name}}</h5> Count: <strong>{{item.count}}</strong>
    <button @click="countUp">+</button>
    <button @click="countDown">-</button>
    <button @click="reset">Reset</button>
  </li>
</template>

Babel + JSX

Vue.component('counterList', {
  template: '#counter-list',
  data() {
    return {
      list: [{
        name: 'Item 1',
        count: 0
      }, {
        name: 'Item 2',
        count: 56473
      }, {
        name: 'Item 3',
        count: 356
      }, {
        name: 'Item 4',
        count: 65
      }, ]
    }
  },
  methods: {
    updateItemCount(index, count) {
      console.log(index, count)
      Vue.set(this.list[index], 'count', count)
    }
  }
})

Vue.component('counter', {
  template: '#counter',
  props: ['item'],
  data() { return { initialCount: this.item.count } },
  computed: {
    count() {
      return this.item.count
    }
  },
  methods: {
    countUp() {
        this.$emit('update', this.count + 1)
      },
      countDown() {
        this.$emit('update', this.count - 1)
      },
      reset() {
        this.$emit('update', this.initialCount)
      }
  }
})

var app = new Vue({
  el: '#app'
})