Vue.js Data binding issue

Question

I am trying to bind data in my userDetails array through post request but i did not get the data , i had tried all the possible solution given in stackoverflow and also in vue.js docs but nothing helps me here is my code.

ND.user_list = new Vue({
el: '#user_list',
data: {
  userDetails: []
},
mounted: function () {
  $.post(ND.routes['users.get'], [], function(data) {
    //console,log(data);
    this.$set(this, 'userDetails', data);
    //this.usersDetails = data;

  }.bind(this), 'json');
  //onsole.log(this.userDetailsdata);
}


});

i am getting data in console log in mounted function but not getting in userDetails array declare in data. here is my view code

<div class="ui grid container" id="user_list">

  <table class="ui celled padded table">
    <thead>
      <tr>
        <th colspan="6">Top Users</th>
      </tr>
    </thead>
      <thead>
      <tr>
        <th class="ui center aligned">#</th>
        <th class="ui center aligned">Name </th>
        <th class="ui center aligned">Email </th>
        <th class="ui center aligned">User Type</th>
        <th class="ui center aligned">Action </th>
      </tr>
    </thead>
    <tbody>
      {% verbatim %}
    <tr v-for="user in userDetails">
      <td>1</td>
      <td class="single line">{{ user.email }}</td>
      <td class="ui center aligned "></td>
      <td class="ui center aligned "></td>
      <td class="ui center aligned ">
      <select class="ui dropdown">
        <option value=" ">Action </option>
        <option value="1">Edit</option>
        <option value="0">Delete</option>
      </select>
      </td>
    </tr>
          {% endverbatim %}


    </tbody>
  </table>
</div>  

Thanks in advance.

Answer 1

The this in the callback fo $.post() does not refer to the VueJS instance. This means that this.userDetails actually will return undefined within the callback. What you can do is to create a proxy for the VueJS instance as such:

ND.user_list = new Vue({
  el: '#user_list',
  data: {
    userDetails: []
  },
  mounted: function () {
    // Proxy `this`
    var that = this;

    $.post(ND.routes['users.get'], [], function(data) {

      // `that` will refer to VueJS instance
      that.userDetails = data;

    }, 'json');
  }
});

Answer 2

You are using this.$set wrong: it should only be used when you got an object in the data object and want to add properties to that object that wasn't there before, or if you want to change indexes of the array. Then first argument should not be the vue object, but the data object (ie the object or array in the data object). See documentation here: https://v2.vuejs.org/v2/guide/reactivity.html or https://v2.vuejs.org/v2/api/#Vue-set .

Instead of: this.$set(this, 'userDetails', data); you should just do this.userDetails = data; . Have you tried this? Also, if you change elements in the array, then you should use Vue.set or splice, but read the documentation carefully before you use it.