从url检索后，Vue2数据未在模板中更新

Question

I am using Vue.js version 2, trying to update a variable which is used in the view.

Bear with me, I have the following code:

new Vue({
    el: '#products',

    data: {
       showProductModal: false,
       product: {}

    },

    methods: {

      retrieveProduct(id) {
        axios.get('/product/'+id).then(function (response) {
            this.product = response.data;
            console.log(this.product);
        });
      }
  }

Please note that:

• The product variable is initialized as an empty object {};
• The "retrieveProduto()" method is called after the user clicks a button. It then makes an API call and, after the promise resolves, updates the product variable.
• I am using axios to make the http request, and it returns a response object, where response.data is the content of the returned object.

The console.log(this.product) results in

{id: 1, name: "Lemon cake", description: "Traditional lemon cake", pic_url: "", category_id: 1, …}

which is exactly the expected output. However, upon calling {{ product }} in the view, the template is not updated in any way, and gets stuck forever in {}.

I have also tested if two-way databinding is working, and the answer is yes. Actually, everything is working perfectly apart from this. Am I doing something wrong? Should I expect that the template is not updated after retrieving an object from a promise?

Any help is appreciated. Thank you in advance.

• The part of the template in which I call the variable is just a {{product}} for testing purposes.
• The reason why I am calling self is that I was using this.product in my first attempts. I have seen this solution elsewhere and changed it so I could give it a shot. Since it didn't work, I am changing it back to this
• Printing console.log(this) returns the complete Vue object, and it has the product property set correctly, but still not reflecting in the template.

Answer 1

You could be running into issues with self , whether due to lack of declaration or scoping issues. Try the following instead:

retrieveProduct(id) {
    var this_vue_instance = this;
    axios.get('/product/'+id).then(function (response) {
        this_vue_instance.product = response.data;
        console.log(this_vue_instance.product);
    });
}

Answer 2

I think it should be some issues with scoping. Try this:

  retrieveProduct(id) {
    axios.get('/product/' + id).then(response => {
      this.product = response.data;
    });
  }

And then use vue-devtools to check if the data is properly changed.