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

$.post()回调中的this不引用 VueJS 实例。 这意味着this.userDetails实际上会在回调中返回 undefined 。 您可以做的是为 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');
  }
});

Answer 2

您使用 this.$set 错误：仅当您在数据对象中有一个对象并希望向该对象添加以前不存在的属性时，或者如果您想更改数组的索引时，才应使用它。 那么第一个参数不应该是vue对象，而是数据对象（即数据对象中的对象或数组）。 请参阅此处的文档： https ://v2.vuejs.org/v2/guide/reactivity.html 或https://v2.vuejs.org/v2/api/#Vue-set 。

而不是： this.$set(this, 'userDetails', data); 你应该这样做this.userDetails = data; . 你试过这个吗？ 另外，如果你改变了数组中的元素，那么你应该使用 Vue.set 或 splice，但在使用之前请仔细阅读文档。