Vue table with form

by Max Sinev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
<div id="app">
  <div class="container">

    <div class="row">
      <div class="col-sm-12">
        <h3>
          Dashboard
        </h3>
      </div>
    </div> 

    <form class="row" @submit.prevent="checkForm">
      <div class="col-sm-12">
        <div class="form-group">
          <label for="url">First Name</label>
          <input type="text" class="form-control" value="" v-model="fname" name="fname" />
        </div>
        <div class="form-group">
          <label for="team">Last Name</label>
          <input type="text" class="form-control" value="" v-model="lname" name="lname" />
        </div>
        <div class="form-group">
          <label for="environment">Age</label>
          <input type="text" class="form-control" value="" v-model="age" name="age" />
        </div>
      </div>
      <div class="col-sm-12">
        <input href="#" class="btn btn-success" type="submit" value="Submit" :disabled="isSaving">
        <span v-show='isSaving'>Saving...</span>
      </div>
    </form> 

    <div>&nbsp;</div>

    <!--<div class="row" v-if="debug">
      <div class="col-sm-12">
        <pre>{{ $data | json }}</pre>
      </div>
    </div> -->

    <!-- Table Start -->

    <div class="row">
      <table style="width:100%">
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Age</th>
        </tr>
        <tr v-for="item in objects" :key="item._id">
          <td>{{item.name}}</td>
          <td>{{item.username}}</td>
          <td>{{item.email}}</td>
        </tr>
      </table>
    </div>
    <!-- Table END -->

  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

const app = new Vue({
  el:'#app',
  data:{
    errors:[],
    fname:null,
    lname:null,
    age:null,
    isSaving: false,
    objects: []
  },
  created() {
      this.getAll();
  },
  methods:{
    checkForm:function(e) {
      this.errors = [];
      if(!this.fname) this.errors.push("First name required.");
      if (this.errors.length) {
         return;
      }
      this.isSaving = true;
      var data = {
          fname: this.fname,
          lname: this.lname,
          age: this.age
      }
      this.$http.post('https://jsonplaceholder.typicode.com/users', data, { emulateJSON: true })
      .then((resp) => {
          console.log(resp);
          return this.getAll();
       })
       .then(() => {
          this.isSaving = false;
          this.fname = null;
          this.lname = null;
          this.age = null;
       })
    },
    
    getAll() {
       this.$http.get('https://jsonplaceholder.typicode.com/users')
       .then((data) => {
           console.log(data);
           this.objects = data.body;
       })
    }
  },

})