Как сохранить данные в экземпляре Vue - PullRequest
Новая
       12

Как сохранить данные в экземпляре Vue

0 голосов
/ 23 ноября 2018

Вопрос довольно прост, все, что я хочу, это получить данные после записи 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.Seems, как после функцииПосле сброса данные сбрасываются. Как можно сохранить данные из пост-запроса AJAX в объекте пользователя из данных: {...}?

Спасибо за помощь !!!

1 Ответ

0 голосов
/ 24 ноября 2018

Проблема в том, что this внутри вашей функции возврата ajax больше не ссылается на экземпляр 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

...