JSFiddle - React, Tailwind, and code Playground

by hunterliu

HTML

<div id="app">
  <prompt v-for="item in list" @change="update" :id:="item.id" :status="item.status"></prompt>
</div>

CSS

#app { padding: 10px; }
.item { margin: 0 10px 0 0; }

JavaScript

Vue.component('prompt', {
  template: '<button @click="change">Update Status!</button>',
  delimiters: ['${', '}'],
  props: ['id', 'status'],
  data: function() {
    return {
      statusValue: this.status
    }
  },
  methods: {
    change: function() {
      if (this.id === 0) {
        this.statusValue = 'failed';
      } else if ( this.id === 1) {
        this.statusValue = 'success';
      } else {
        this.statusValue = 'pending';
      }
      this.$emit('change', this.statusValue);
    }
  },
  watch: {
    statusValue: {
      immediate: true,
      handler(newValue, oldValue) {
        var newStatus = newValue || 'no new value';
        var oldStatus = oldValue || 'no old value';

        console.log('old value: ' + oldStatus);
        console.log('new value: ' + newStatus);
      }
    }
  }
});

var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    list: [
      { id: 0 , status: 'success' },
      { id: 1 , status: 'pending' },
      { id: 2 , status: 'failed' }
    ]
  },
  methods: {
    update: function(status) {
      console.log('update status: ' + status);
    }
  }
});