I've successfully implemented a code snippet that renders a list of songs here: https://jsfiddle.net/jeremypbeasley/guraav4r/8/
var apiURL = "https://ws.audioscrobbler.com/2.0/?method=user.gettoptracks&user=thisisheroic&period=7day&limit=6&api_key=3cbc1a3aa903935d08223263bcc3ba0b&format=json";
new Vue({
el: '#demo',
data: {
commits: null
},
created: function () {
this.fetchData()
},
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', apiURL)
xhr.onload = function () {
self.commits = JSON.parse(xhr.responseText)
}
xhr.send()
}
}
})
This method works flawlessly for rendering the list of tracks, however, when I try to implement the same logic inside a component, it breaks and throws two errors:
Error messages I receive are as follows:
[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.commits.toptracks is undefined.
Here's my unsuccessful attempt within a component context:
Vue.component('manage-posts', {
template: '#manage-template',
data: {
commits: null,
},
created: function () {
this.fetchData()
},
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
xhr.open('GET', apiURL)
xhr.onload = function () {
this.data = JSON.parse(xhr.responseText);
console.log(JSON.parse(xhr.responseText));
}
xhr.send()
}
}
})
I would greatly appreciate any assistance in understanding these errors and figuring out where I may have gone wrong in my approach!