JSFiddle - React, Tailwind, and code Playground

by ginpei

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="app">
  <app-form v-bind:message-change2="message_change" v-bind:message2="message"></app-form>
  <app-title v-bind:message1="message"></app-title>
</div>

JavaScript

var appTitle = {
  template: '<h1>{{message1}}</h1>',
  props: [
    'message1',
  ],
};
  
var appForm = {
  template:
    '<div>' +
      '<input v-model="message2" type="text" />' +
      '<button v-on:click="button_click">Update</button>' +
    '</div>',
  props: [
    'message2',
    'messageChange2'
  ],
  methods: {
    button_click: function(event) {
      this.messageChange2(event, this.message2);
    },
  },
};
  
var app = new Vue({
  el: '#app',
  components: {
      appTitle: appTitle,
      appForm: appForm,
  },
  data: {
    message: 'Hello',
  },
  methods: {
    message_change: function(event, newMessage) {
      this.message = newMessage;
    },
  },
});