Vue.js Проблема с привязкой данных

Question

Я пытаюсь связать данные в моем массиве userDetails с помощью пост-запроса, но я не получил данные, я перепробовал все возможные решения, приведенные в stackoverflow, а также в документах vue.js, но здесь мне ничего не помогает, это мой код.

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);
}


});

Я получаю данные в консольном журнале в смонтированной функции, но не получаю в объявлении массива userDetails данные. вот мой взгляд код

<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>  

Заранее спасибо.

Answer 1

Вы используете это. $ Установлено неправильно: его следует использовать только тогда, когда вы получили объект в объекте данных и хотите добавить свойства к этому объекту, которых раньше не было, или если вы хотите изменить индексы объекта.массив.Тогда первым аргументом должен быть не объект vue, а объект данных (т. Е. Объект или массив в объекте данных).См. Документацию здесь: https://vuejs.org/v2/guide/reactivity.html или https://vuejs.org/v2/api/#Vue-set.

Вместо: this.$set(this, 'userDetails', data); вы должны просто сделать this.userDetails = data;.Вы пробовали это?Кроме того, если вы изменяете элементы в массиве, вам следует использовать Vue.set или splice, но перед использованием внимательно прочитайте документацию.

Answer 2

this в обратном вызове fo $.post() не относится к экземпляру VueJS. Это означает, что this.userDetails фактически вернет неопределенное значение в обратном вызове. Что вы можете сделать, это создать прокси для экземпляра VueJS следующим образом:

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');
  }
});