The mounted function in VueJS is encountering an issue where the data property is being

Question

The mounted function in VueJS is encountering an issue where the data property is being

After making a GET request using Axios, I am successfully receiving data. However, I am facing an issue where I cannot access the application's data properties within the mounted function to store the results of the request. When I log this.productList, it returns undefined. Can someone help me troubleshoot this problem?

new Vue({
    el: '#products',
    data: function(){
        return{
            test: 'Hello',
            productList: null
        }
    },
    mounted: function(){
        axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(function(response){
            console.log(response.data);
            console.log(this.productList)
        }).catch(function(error){
            console.log(error);
        })
    }    
})

javascript vue.js vuejs2 axios

Answer 1

Answer №1

When working within that particular function, the keyword this does not represent your vue instance; it carries a different meaning.

To address this issue, you can create a temporary variable to store the value of this from the outer function, like so:

mounted: function() {

  let $vm = this;

  axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(function(response) {
    console.log(response.data);
    console.log($vm.productList)
  }).catch(function(error) {
    console.log(error);
  })
}

Alternatively, you could utilize arrow functions for a cleaner solution:

mounted: function() {

  axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then((response) => {
    console.log(response.data);
    console.log(this.productList)
  }).catch(function(error) {
    console.log(error);
  })
}

Answer 2

When working within that particular function, the keyword this does not represent your vue instance; it carries a different meaning.

To address this issue, you can create a temporary variable to store the value of this from the outer function, like so:

mounted: function() {

  let $vm = this;

  axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(function(response) {
    console.log(response.data);
    console.log($vm.productList)
  }).catch(function(error) {
    console.log(error);
  })
}

Alternatively, you could utilize arrow functions for a cleaner solution:

mounted: function() {

  axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then((response) => {
    console.log(response.data);
    console.log(this.productList)
  }).catch(function(error) {
    console.log(error);
  })
}

The mounted function in VueJS is encountering an issue where the data property is being

Answer №1

Similar questions

You cannot use res.json before res.redirect in Express.js

javascript limitation on self-executing code

VUE array values not displaying flex-row properly

Having trouble setting breakpoints in Chrome DevTools for my Vue application

What steps should I take in Three.js to make the "terrain" look three-dimensional?

Using JSF to make AJAX calls to PrimeFaces components

NavLinkButton - add style when active or selected

What are the steps to creating an animated column chart using the aspx chart control?

When using Node Puppeteer, if the page.on( "request" ) event is triggered, it will throw an error message stating "Request is already being handled!"

Development of client and server using socket.io in node.js

Filtering data attributes in jQuery for multiple elements

What could be causing my Google Places nearby search to display atmosphere and contact information even when all fields are properly specified?

Easily pass parameters to an event handler in a stateless component without the need to create a new reference of the handler every time the component re-re

What is the best way to connect socket.io to multiple instances of HTTPServer?

What is the best way to incorporate an exported TypeScript class into my JavaScript file?

Difficulty in packaging JavaScript resources within Laravel Project

User not authorized. Node/Mongo user not found

What could be causing this issue with the ng-bind and ng-show directives not functioning as expected?

Assign a predefined object class as a set literal to the Input property of a component

Creating custom Bootstrap Card Groups by dynamically generating the specified number of cards with Angular directives