JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src='https://unpkg.com/[email protected]/dist/vue.js'></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<div id='app'>
  <form @submit.prevent='createUser'>
    <label><input v-model='user.name'/></label>
    <label><input v-model='user.age' type='number'/></label>
    <button type='submit'>Create user</button>
  </form>
  <ul>
  <li v-for='u in users'>{{u.name}} - {{u.age}}years old</li>
  </ul>
</div>

JavaScript

new Vue({
  http: {
    root: 'https://vue-simple-4124a.firebaseio.com'
    // header:
    // ...
  },
  el: '#app',
  data: {
    users: {},
    user: {
      name: '',
      age: 0,
    }
  },
  created () {
    this.$http.get('data.json').then(response => {
      this.users = response.body;
    }, error => {
    })
  },
  methods: {
    createUser () {
      this.$http.post('data.json', this.user).then(response => {
        if (response.ok) {
          this.users[response.body.name] = this.user;
          this.user = { name: '', age: 0 };
        }
      }, error => {
        // panic!!!
      })
    }  
  }
})