[Vuejs]-Populate updated data into table after submitting the form in VueJS

by

0👍

The checkForm method returns before e.preventDefault() if you have typed anything in the fname-input. Move e.preventDefault() to the top of the method, and that should stop the form from navigating.

Also, your last name input also has fname as v-model.

To populate the table I’d use something like this:

index.html

<table style="width:100%">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
    </tr>
    <tr v-for="(row, index) in table" :key="index">
        <td>{{row.fname}}</td>
        <td>{{row.lname}}</td>
        <td>{{row.age}}</td>
    </tr>
</table>

script.js

data: {
    return {
        ...
        table: []
    }
},
mounted() {
    this.populateTable()
},
methods: {
    checkForm(e) {
        e.preventDefault();
        if (this.fname) {
            table.push({ fname: this.fname, lname: this.lname, age: this.age })
            return true;
        }
        this.errors = [];
        if (!this.fname) this.errors.push("First name required.");
        return false;
    },
    populateTable() {
        /* GET-request, put into this.table */
    }
}

0👍

You need to pass data to server with ajax request instead of form action:

  1. In template form should open like this (without action and method):

    <form class="row" @submit.prevent="checkForm">

  2. Use ajax to send data to server (I see you use vue-resource):

    checkForm:function(e) {
    this.errors = [];
    if(!this.fname) this.errors.push("First name required.");
    if (this.errors.length) {
       return;
    }
    var data = {
        fname: this.fname,
        lname: this.lname,
        age: this.age
    }
    this.$http.post('http://localhost:3000/entry', data, { emulateJSON: true })
    .then(function(){
        console.log('Saved!');
     });
}
  3. So data in table automatically updates.

UPDATE

You need also array of objects to render table correctly, now I see.
I prepared example, but I changed url to jsonplaceholder to show that it works.
After saving form app fetches all objects from server (but you will not see new created object in my example because i use public API that is not allowed to change entire collection just allows making requests, when you add correct own URLs it will work). Also you need to change output fields in table to correct ones – I added comments.

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
      }
      // http://localhost:3000/entry
      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() {
       // http://localhost:3000/entries
       this.$http.get('https://jsonplaceholder.typicode.com/users')
       .then((data) => {
           console.log(data);
           this.objects = data.body;
       })
    }
  },

})
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);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<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">
          <!-- item.fname -->
          <td>{{item.name}}</td>
          <!-- item.lname -->
          <td>{{item.username}}</td>
          <!-- item.age -->
          <td>{{item.email}}</td>
        </tr>
      </table>
    </div>
    <!-- Table END -->

  </div>
</div>

Leave a comment