Question

问题很简单，我只想在AJAX发布信息保存在Vue instace的数据中之后获取数据。这是我的代码：

const VMList  = new Vue({
  el: '#MODAL_USER_DATA',
  data: {
    user: []//,
    //userAcc: []
  },
  methods: {
    getUserAcc: function ( userID ) {

      this.user = { _id : userID };

      var self = this
      $.ajax({
        url: "/listuser",
        type: "POST",
        data: this.user,
        success: function(data) {
          this.user = data ;
          //this.userAcc = Object.assign({}, this.userAcc, data );
          alert(JSON.stringify(this.user));//show the user correctly (e.g user = data)
          $('#popupDeleteModal').modal('show');
          alert(JSON.stringify(data));//show data,the entire json object,everything is good
        },
        error: function(err) {
          console.log('error: ',err);
        },
      });

    }
  }
});

然后，当我触发getUserAcc（id）方法后，我尝试在浏览器控制台中验证VMList.user值，并且我仅获得id。似乎在函数结束数据重置之后。我该如何存储来自data：{...}的用户对象中来自AJAX发布请求的数据：

谢谢您的帮助！

Answer 1

问题在于，ajax返回函数中的this不再引用vue实例。

解决方案是将this关键字保存到函数内部的变量中。示例：

getUserAcc: function ( userID ) {
  var that = this;
  this.user = { _id : userID };
  $.ajax({
    url: "/listuser",
    type: "POST",
    data: this.user,
    success: function(data) {
      that.user = data;
      //Rest of your code
    },
    error: function(err) {
      console.log('error: ',err);
    },
  });
}

以下是有关关键字this：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

的行为的详细信息

如何在Vue实例中保存数据

1 个答案: