Hi,
I have the following component components/LastFm.vue
with the following content:
<template>
<ul>
<li v-for="song in songs">
{{ song.name }}
</li>
</ul>
</template>
<script>
import axios from 'axios'
const apiUrl = 'http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks'
export default {
async data (context) {
let { data } = await axios.get(apiUrl + '&user=visualcookie&limit=3&api_key=XXX&format=json')
return { songs: data.recenttracks.track }
}
}
</script>
But I get the following error from Vue:
[Vue warn]: data functions should return an object:
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
(found in component <LastFm> at F:\work\github\v5\components\LastFm.vue)
warn @ vue.runtime.common.js:521
initData @ vue.runtime.common.js:3174
initState @ vue.runtime.common.js:3121
Vue._init @ vue.runtime.common.js:3378
VueComponent @ vue.runtime.common.js:3500
createComponentInstanceForVnode @ vue.runtime.common.js:1724
init @ vue.runtime.common.js:1734
hydrate @ vue.runtime.common.js:4496
hydrate @ vue.runtime.common.js:4512
hydrate @ vue.runtime.common.js:4512
hydrate @ vue.runtime.common.js:4512
hydrate @ vue.runtime.common.js:4512
patch @ vue.runtime.common.js:4585
Vue._update @ vue.runtime.common.js:2635
updateComponent @ vue.runtime.common.js:2609
get @ vue.runtime.common.js:2934
Watcher @ vue.runtime.common.js:2926
Vue._mount @ vue.runtime.common.js:2608
0.Vue$2.$mount @ vue.runtime.common.js:6178
init @ vue.runtime.common.js:1740
(anonymous) @ vue.runtime.common.js:1894
hydrate @ vue.runtime.common.js:4496
patch @ vue.runtime.common.js:4585
Vue._update @ vue.runtime.common.js:2635
updateComponent @ vue.runtime.common.js:2609
get @ vue.runtime.common.js:2934
Watcher @ vue.runtime.common.js:2926
Vue._mount @ vue.runtime.common.js:2608
0.Vue$2.$mount @ vue.runtime.common.js:6178
init @ vue.runtime.common.js:1740
hydrate @ vue.runtime.common.js:4496
hydrate @ vue.runtime.common.js:4512
patch @ vue.runtime.common.js:4585
Vue._update @ vue.runtime.common.js:2635
updateComponent @ vue.runtime.common.js:2609
get @ vue.runtime.common.js:2934
Watcher @ vue.runtime.common.js:2926
Vue._mount @ vue.runtime.common.js:2608
0.Vue$2.$mount @ vue.runtime.common.js:6178
init @ vue.runtime.common.js:1740
hydrate @ vue.runtime.common.js:4496
hydrate @ vue.runtime.common.js:4512
patch @ vue.runtime.common.js:4585
Vue._update @ vue.runtime.common.js:2635
updateComponent @ vue.runtime.common.js:2609
get @ vue.runtime.common.js:2934
Watcher @ vue.runtime.common.js:2926
Vue._mount @ vue.runtime.common.js:2608
0.Vue$2.$mount @ vue.runtime.common.js:6178
init @ vue.runtime.common.js:1740
hydrate @ vue.runtime.common.js:4496
hydrate @ vue.runtime.common.js:4512
patch @ vue.runtime.common.js:4585
Vue._update @ vue.runtime.common.js:2635
updateComponent @ vue.runtime.common.js:2609
get @ vue.runtime.common.js:2934
Watcher @ vue.runtime.common.js:2926
Vue._mount @ vue.runtime.common.js:2608
0.Vue$2.$mount @ vue.runtime.common.js:6178
mountApp @ client.js:322
(anonymous) @ client.js:344
vue.runtime.common.js:521 [Vue warn]: Property or method "songs" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in component <LastFm> at F:\work\github\v5\components\LastFm.vue)
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c177">#c177</a>)</em></sub></div>