JSFiddle - React, Tailwind, and code Playground

by budiadiono

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo" v-cloak>
  <form id="form">
    <fieldset v-if="!submited">
      <input name="foo" v-model="foo"/>
    </fieldset>    
    <button v-if="!submited" type="submit">Go!</button>
    <button v-if="submited" type="button" @click="again()">Again</button>
  </form>
</div>

JavaScript

var demo = new Vue({
    el: '#demo',
    ready: function() {
    	var self = this;
    	$('#form').submit(function(e){
      	self.submited = true;
      	e.preventDefault();
      })
    },
    data: {
    	submited: false,
    	foo: 'Foooo...!'
    },
    methods: {
    	again: function() {
    		this.submited = false;
    	}
    }
})