Nuxtでサーバから取ってきたデータをdataプロパティに代入したい

Question

やりたいこと

タイトルの通りです。

ためしたこと

AsyncData内の処理で取得したデータがマージされた後にmountedでnameに代入するようにしてみました

data: ()=> ){
  name: ""
}),
mounted() {
  name = info.data.attributes.name
},
asyncData({ $axios, params }) {
    return $axios.$get(`http://localhost:3000/api/v1/users/${params.id}`)
    .then((res) => {
        return {info: res}
    })
},

すると次のエラーがでます

ReferenceError: info is not defined
    at VueComponent.mounted (_id.vue?21cd:59)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at insert (vue.runtime.esm.js?2b0e:3139)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at Object.invoker [as insert] (vue.runtime.esm.js?2b0e:2175)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565)
    at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3948)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
vue__WEBPACK_IMPORTED_MODULE_19__.default.config.errorHandler @ client.js?06a0:77
globalHandleError @ vue.runtime.esm.js?2b0e:1870
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
callHook @ vue.runtime.esm.js?2b0e:4219
insert @ vue.runtime.esm.js?2b0e:3139
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2175
invokeInsertHook @ vue.runtime.esm.js?2b0e:6346
patch @ vue.runtime.esm.js?2b0e:6565
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:3969
eval @ vue.runtime.esm.js?2b0e:8200
wrappedHook @ vue.runtime.esm.js?2b0e:2235
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2175
eval @ vue.runtime.esm.js?2b0e:7696
eval @ vue.runtime.esm.js?2b0e:336
whenTransitionEnds @ vue.runtime.esm.js?2b0e:7391
eval @ vue.runtime.esm.js?2b0e:7728
requestAnimationFrame (async)
eval @ vue.runtime.esm.js?2b0e:7363
requestAnimationFrame (async)
nextFrame @ vue.runtime.esm.js?2b0e:7362
performLeave @ vue.runtime.esm.js?2b0e:7720
leave @ vue.runtime.esm.js?2b0e:7704
remove$$1 @ vue.runtime.esm.js?2b0e:7797
removeAndInvokeRemoveHook @ vue.runtime.esm.js?2b0e:6155
removeVnodes @ vue.runtime.esm.js?2b0e:6129
patch @ vue.runtime.esm.js?2b0e:6558
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ vue-router.esm.js?8c4f:2780
eval @ vue-router.esm.js?8c4f:2779
updateRoute @ vue-router.esm.js?8c4f:2208
eval @ vue-router.esm.js?8c4f:2071
eval @ vue-router.esm.js?8c4f:2193
step @ vue-router.esm.js?8c4f:1877
step @ vue-router.esm.js?8c4f:1884
runQueue @ vue-router.esm.js?8c4f:1888
eval @ vue-router.esm.js?8c4f:2188
step @ vue-router.esm.js?8c4f:1877
eval @ vue-router.esm.js?8c4f:1881
eval @ vue-router.esm.js?8c4f:2173
eval @ vue-router.esm.js?8c4f:1955
iterator @ vue-router.esm.js?8c4f:2154
step @ vue-router.esm.js?8c4f:1880
step @ vue-router.esm.js?8c4f:1884
eval @ vue-router.esm.js?8c4f:1881
eval @ vue-router.esm.js?8c4f:2173
_callee4$ @ client.js?06a0:454
tryCatch @ runtime.js?96cf:45
invoke @ runtime.js?96cf:271
prototype.<computed> @ runtime.js?96cf:97
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
render @ client.js?06a0:239
iterator @ vue-router.esm.js?8c4f:2154
step @ vue-router.esm.js?8c4f:1880
eval @ vue-router.esm.js?8c4f:1881
eval @ vue-router.esm.js?8c4f:2173
_callee3$ @ client.js?06a0:160
tryCatch @ runtime.js?96cf:45
invoke @ runtime.js?96cf:271
prototype.<computed> @ runtime.js?96cf:97
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
loadAsyncComponents @ client.js?06a0:124
iterator @ vue-router.esm.js?8c4f:2154
step @ vue-router.esm.js?8c4f:1880
step @ vue-router.esm.js?8c4f:1884
runQueue @ vue-router.esm.js?8c4f:1888
confirmTransition @ vue-router.esm.js?8c4f:2181
transitionTo @ vue-router.esm.js?8c4f:2068
push @ vue-router.esm.js?8c4f:2399
push @ vue-router.esm.js?8c4f:2814
push @ router.js?5783:18
handler @ vue-router.esm.js?8c4f:1097
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917

分析

info is not definedと出ているので、infoがdataにマージされるまえにcreatedが実行されているのだと思いますが、何かAsyncDataで取ってきたデータをdataプロパティ(name)に代入する方法はありますか？

Comments

[hoshi-takanori]

非同期なので、then の中で return じゃなくて表示を更新する必要がありますが、Nuxt のやり方は知りません。