JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src='https://unpkg.com/[email protected]/dist/vue.js'></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
      rel="stylesheet">
<div id='app' class='container'>
  <div>
    <p>username: {{user.username}}</p>
    <p>city: {{user.city}}</p>
    <p>password: {{user.password}}</p>
    <p>priority: {{user.priority}}</p>
    <ul>
      <li v-for='i in user.sendEmail'>{{i}}</li>
    </ul>
    <p>gender: {{user.gender}}</p>
  </div>
  <form @submit.prevent='submit'>
    <div class='form-group'>
      <label class='control-label'>Username</label>
      <input v-model='user.username' class='form-control'/>
    </div>
    <div class='form-group'>
      <label class='control-label'>Password</label>
      <input v-model.lazy='user.password' class='form-control'/>
    </div>
    <div class='form-group'>
      <label class='control-label'>City</label>
      <input v-model='user.city' class='form-control'/>
    </div>
    <div class='form-group'>
      <label class='control-label'>Priority</label>
      <select class='form-control' v-model='user.priority'>
        <option></option>
        <option v-for='p in priorities' :value='p'>{{p}}</option>
      </select>
    </div>
    <div class='form-group'>
      <label class='control-label'>Send Email</label>
      <label><input type='checkbox' v-model='user.sendEmail' value='Send Mail'/> Send Mail</label>
      <label><input type='checkbox' v-model='user.sendEmail' value='Send Info Mail'/> Send Info Mail</label>
    </div>
    <div class='form-group'>
    <label class='control-label'>Gender</label>
    <label><input type='radio' v-model='user.gender' value='Male'/> Male</label>
    <label><input type='radio' v-model='user.gender' value='Female'/> Female</label>
    </div>
    <button type='submit' class='btn btn-primary'>Submit</button>
  </form>
</div>

JavaScript

function initUser () {
  return {
    username: '',
    city: 'Dnipro',
    password: '',
    sendEmail: [],
    gender: '',
    priority: ''
  };  
};

new Vue({
  el: '#app',
  data: {
    user: initUser(),
    priorities: [ 'Low', 'Medium', 'High' ]
  },
  methods: {
    submit () {
      this.user = initUser();
    }
  }
});