[Vuejs]-Page reload on modal popup submit

by

0👍

✅

You’re definitely going to need to prevent the form from being submitted with @submit.prevent as you suggest. Otherwise the browser will submit the form itself.

There are a few small errors in your code. First, the vue-resource methods ($http.get and $http.post) return promises, so use .then instead of passing in callbacks. Secondly, you’re calling fetchUser before your post request has gone through. Finally, the response data is in response.data, not passed in directly as a parameter to your callback as you did.

The following code should work:

methods: {
  fetchUser: function () {
    this.$http.get('/api/users').then(function (response) {
      this.$set('users', response.data);
    });
  },
  AddNewUser: function () {
    var user = this.newUser;
    this.newUser = {fname: '', mname: '', lname: '', cid: '', email: '', password: '', utype: ''};
    console.log(this.newUser);

    this.$http.post('/api/users', user).then(function () {
      this.fetchUser();
    });

    $('#userAddModal').modal('hide');
  }

Leave a comment