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">
  <button v-on:click="edit_click">編集</button>
  <app-title v-bind:title="message"></app-title>
</div>

JavaScript

Vue.component('app-title', {
  template: '<h1>{{title}}</h1>',
  props: [
    'title',
  ],
});
  
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!',
  },
  methods: {
    edit_click: function(event) {
      var newMessage = window.prompt('タイトル:', this.message);
      this.message = newMessage;
    },
  },
});