Django

VueのComponentsが読み込まれない(Total:14day48.5h)

なんでかわからず、かなりの時間はまっている…

VueでComponentsが表示されない

本当にこういう時に、解決できるスピードは経験値と勘の良さだと思う。
エラーコードはこちら。

Vue warn]: Property or method "items" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <ScheduleTable> at src/modules/schedule/ScheduleTable.vue
<ScheduleYearMonth> at src/views/schedule/Schedule.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:619
warnNonPresent @ vue.runtime.esm.js?2b0e:2024
get @ vue.runtime.esm.js?2b0e:2079
render @ ScheduleTable.vue?6b7f:18
Vue._render @ vue.runtime.esm.js?2b0e:3569
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
patch @ vue.runtime.esm.js?2b0e:6521
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
merged @ vue.runtime.esm.js?2b0e:3322
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
addVnodes @ vue.runtime.esm.js?2b0e:6150
patchVnode @ vue.runtime.esm.js?2b0e:6369
updateChildren @ vue.runtime.esm.js?2b0e:6237
patchVnode @ vue.runtime.esm.js?2b0e:6363
patch @ vue.runtime.esm.js?2b0e:6526
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then(非同期)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ vue-router.esm.js?8c4f:3003
eval @ vue-router.esm.js?8c4f:3002
updateRoute @ vue-router.esm.js?8c4f:2414
eval @ vue-router.esm.js?8c4f:2263
eval @ vue-router.esm.js?8c4f:2402
step @ vue-router.esm.js?8c4f:2001
step @ vue-router.esm.js?8c4f:2008
runQueue @ vue-router.esm.js?8c4f:2012
eval @ vue-router.esm.js?8c4f:2397
step @ vue-router.esm.js?8c4f:2001
eval @ vue-router.esm.js?8c4f:2005
eval @ vue-router.esm.js?8c4f:2384
eval @ vue-router.esm.js?8c4f:2127
eval @ vue-router.esm.js?8c4f:2203
Promise.then(非同期)
eval @ vue-router.esm.js?8c4f:2150
eval @ vue-router.esm.js?8c4f:2171
eval @ vue-router.esm.js?8c4f:2171
flatMapComponents @ vue-router.esm.js?8c4f:2170
eval @ vue-router.esm.js?8c4f:2106
iterator @ vue-router.esm.js?8c4f:2362
step @ vue-router.esm.js?8c4f:2004
step @ vue-router.esm.js?8c4f:2008
eval @ vue-router.esm.js?8c4f:2005
eval @ vue-router.esm.js?8c4f:2384
eval @ index.ts?ec22:75
iterator @ vue-router.esm.js?8c4f:2362
step @ vue-router.esm.js?8c4f:2004
runQueue @ vue-router.esm.js?8c4f:2012
confirmTransition @ vue-router.esm.js?8c4f:2392
transitionTo @ vue-router.esm.js?8c4f:2260
init @ vue-router.esm.js?8c4f:2994
beforeCreate @ vue-router.esm.js?8c4f:1298
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
callHook @ vue.runtime.esm.js?2b0e:4235
Vue._init @ vue.runtime.esm.js?2b0e:5018
Vue @ vue.runtime.esm.js?2b0e:5099
eval @ main.ts?e4f2:13
./src/main.ts @ app.js:1078
__webpack_require__ @ app.js:854
fn @ app.js:151
1 @ app.js:1187
__webpack_require__ @ app.js:854
checkDeferredModules @ app.js:46
(匿名) @ app.js:994
(匿名) @ app.js:997
他 12 件のフレームを表示
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading '0')"
found in
---> <ScheduleTable> at src/modules/schedule/ScheduleTable.vue
<ScheduleYearMonth> at src/views/schedule/Schedule.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1893
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
Vue._render @ vue.runtime.esm.js?2b0e:3571
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
patch @ vue.runtime.esm.js?2b0e:6521
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
merged @ vue.runtime.esm.js?2b0e:3322
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
addVnodes @ vue.runtime.esm.js?2b0e:6150
patchVnode @ vue.runtime.esm.js?2b0e:6369
updateChildren @ vue.runtime.esm.js?2b0e:6237
patchVnode @ vue.runtime.esm.js?2b0e:6363
patch @ vue.runtime.esm.js?2b0e:6526
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then(非同期)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ vue-router.esm.js?8c4f:3003
eval @ vue-router.esm.js?8c4f:3002
updateRoute @ vue-router.esm.js?8c4f:2414
eval @ vue-router.esm.js?8c4f:2263
eval @ vue-router.esm.js?8c4f:2402
step @ vue-router.esm.js?8c4f:2001
step @ vue-router.esm.js?8c4f:2008
runQueue @ vue-router.esm.js?8c4f:2012
eval @ vue-router.esm.js?8c4f:2397
step @ vue-router.esm.js?8c4f:2001
eval @ vue-router.esm.js?8c4f:2005
eval @ vue-router.esm.js?8c4f:2384
eval @ vue-router.esm.js?8c4f:2127
eval @ vue-router.esm.js?8c4f:2203
Promise.then(非同期)
eval @ vue-router.esm.js?8c4f:2150
eval @ vue-router.esm.js?8c4f:2171
eval @ vue-router.esm.js?8c4f:2171
flatMapComponents @ vue-router.esm.js?8c4f:2170
eval @ vue-router.esm.js?8c4f:2106
iterator @ vue-router.esm.js?8c4f:2362
step @ vue-router.esm.js?8c4f:2004
step @ vue-router.esm.js?8c4f:2008
eval @ vue-router.esm.js?8c4f:2005
eval @ vue-router.esm.js?8c4f:2384
eval @ index.ts?ec22:75
iterator @ vue-router.esm.js?8c4f:2362
step @ vue-router.esm.js?8c4f:2004
runQueue @ vue-router.esm.js?8c4f:2012
confirmTransition @ vue-router.esm.js?8c4f:2392
transitionTo @ vue-router.esm.js?8c4f:2260
init @ vue-router.esm.js?8c4f:2994
beforeCreate @ vue-router.esm.js?8c4f:1298
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
callHook @ vue.runtime.esm.js?2b0e:4235
Vue._init @ vue.runtime.esm.js?2b0e:5018
Vue @ vue.runtime.esm.js?2b0e:5099
eval @ main.ts?e4f2:13
./src/main.ts @ app.js:1078
__webpack_require__ @ app.js:854
fn @ app.js:151
1 @ app.js:1187
__webpack_require__ @ app.js:854
checkDeferredModules @ app.js:46
(匿名) @ app.js:994
(匿名) @ app.js:997
他 12 件のフレームを表示
vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of undefined (reading '0')
at Proxy.render (ScheduleTable.vue?6b7f:18)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081)
at Watcher.get (vue.runtime.esm.js?2b0e:4495)
at new Watcher (vue.runtime.esm.js?2b0e:4484)
at mountComponent (vue.runtime.esm.js?2b0e:4088)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8459)
at init (vue.runtime.esm.js?2b0e:3137)
at createComponent (vue.runtime.esm.js?2b0e:6022)
at createElm (vue.runtime.esm.js?2b0e:5969)
logError @ vue.runtime.esm.js?2b0e:1897
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
Vue._render @ vue.runtime.esm.js?2b0e:3571
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
patch @ vue.runtime.esm.js?2b0e:6521
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
merged @ vue.runtime.esm.js?2b0e:3322
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
addVnodes @ vue.runtime.esm.js?2b0e:6150
patchVnode @ vue.runtime.esm.js?2b0e:6369
updateChildren @ vue.runtime.esm.js?2b0e:6237
patchVnode @ vue.runtime.esm.js?2b0e:6363
patch @ vue.runtime.esm.js?2b0e:6526
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then(非同期)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ vue-router.esm.js?8c4f:3003
eval @ vue-router.esm.js?8c4f:3002
updateRoute @ vue-router.esm.js?8c4f:2414
eval @ vue-router.esm.js?8c4f:2263
eval @ vue-router.esm.js?8c4f:2402
step @ vue-router.esm.js?8c4f:2001
step @ vue-router.esm.js?8c4f:2008
runQueue @ vue-router.esm.js?8c4f:2012
eval @ vue-router.esm.js?8c4f:2397
step @ vue-router.esm.js?8c4f:2001
eval @ vue-router.esm.js?8c4f:2005
eval @ vue-router.esm.js?8c4f:2384
eval @ vue-router.esm.js?8c4f:2127
eval @ vue-router.esm.js?8c4f:2203
Promise.then(非同期)
eval @ vue-router.esm.js?8c4f:2150
eval @ vue-router.esm.js?8c4f:2171
eval @ vue-router.esm.js?8c4f:2171
flatMapComponents @ vue-router.esm.js?8c4f:2170
eval @ vue-router.esm.js?8c4f:2106
iterator @ vue-router.esm.js?8c4f:2362
step @ vue-router.esm.js?8c4f:2004
step @ vue-router.esm.js?8c4f:2008
eval @ vue-router.esm.js?8c4f:2005
eval @ vue-router.esm.js?8c4f:2384
eval @ index.ts?ec22:75
iterator @ vue-router.esm.js?8c4f:2362
step @ vue-router.esm.js?8c4f:2004
runQueue @ vue-router.esm.js?8c4f:2012
confirmTransition @ vue-router.esm.js?8c4f:2392
transitionTo @ vue-router.esm.js?8c4f:2260
init @ vue-router.esm.js?8c4f:2994
beforeCreate @ vue-router.esm.js?8c4f:1298
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
callHook @ vue.runtime.esm.js?2b0e:4235
Vue._init @ vue.runtime.esm.js?2b0e:5018
Vue @ vue.runtime.esm.js?2b0e:5099
eval @ main.ts?e4f2:13
./src/main.ts @ app.js:1078
__webpack_require__ @ app.js:854
fn @ app.js:151
1 @ app.js:1187
__webpack_require__ @ app.js:854
checkDeferredModules @ app.js:46
(匿名) @ app.js:994
(匿名) @ app.js:997
他 11 件のフレームを表示
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook (Promise/async): "TypeError: Cannot read properties of undefined (reading 'yearmonth')"
found in
---> <ScheduleTable> at src/modules/schedule/ScheduleTable.vue
<ScheduleYearMonth> at src/views/schedule/Schedule.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1893
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
eval @ vue.runtime.esm.js?2b0e:1865
Promise.catch(非同期)
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1865
callHook @ vue.runtime.esm.js?2b0e:4235
Vue._init @ vue.runtime.esm.js?2b0e:5022
ScheduleTable @ vue.runtime.esm.js?2b0e:5168
createComponentInstanceForVnode @ vue.runtime.esm.js?2b0e:3304
init @ vue.runtime.esm.js?2b0e:3133
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
createChildren @ vue.runtime.esm.js?2b0e:6097
createElm @ vue.runtime.esm.js?2b0e:5998
patch @ vue.runtime.esm.js?2b0e:6521
Vue._update @ vue.runtime.esm.js?2b0e:3960
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
merged @ vue.runtime.esm.js?2b0e:3322
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
addVnodes @ vue.runtime.esm.js?2b0e:6150
patchVnode @ vue.runtime.esm.js?2b0e:6369
updateChildren @ vue.runtime.esm.js?2b0e:6237
patchVnode @ vue.runtime.esm.js?2b0e:6363
patch @ vue.runtime.esm.js?2b0e:6526
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then(非同期)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ vue-router.esm.js?8c4f:3003
eval @ vue-router.esm.js?8c4f:3002
updateRoute @ vue-router.esm.js?8c4f:2414
eval @ vue-router.esm.js?8c4f:2263
eval @ vue-router.esm.js?8c4f:2402
step @ vue-router.esm.js?8c4f:2001
step @ vue-router.esm.js?8c4f:2008
runQueue @ vue-router.esm.js?8c4f:2012
eval @ vue-router.esm.js?8c4f:2397
step @ vue-router.esm.js?8c4f:2001
eval @ vue-router.esm.js?8c4f:2005
eval @ vue-router.esm.js?8c4f:2384
eval @ vue-router.esm.js?8c4f:2127
eval @ vue-router.esm.js?8c4f:2203
Promise.then(非同期)
eval @ vue-router.esm.js?8c4f:2150
eval @ vue-router.esm.js?8c4f:2171
eval @ vue-router.esm.js?8c4f:2171
flatMapComponents @ vue-router.esm.js?8c4f:2170
eval @ vue-router.esm.js?8c4f:2106
iterator @ vue-router.esm.js?8c4f:2362
step @ vue-router.esm.js?8c4f:2004
step @ vue-router.esm.js?8c4f:2008
eval @ vue-router.esm.js?8c4f:2005
eval @ vue-router.esm.js?8c4f:2384
eval @ index.ts?ec22:75
iterator @ vue-router.esm.js?8c4f:2362
step @ vue-router.esm.js?8c4f:2004
runQueue @ vue-router.esm.js?8c4f:2012
confirmTransition @ vue-router.esm.js?8c4f:2392
transitionTo @ vue-router.esm.js?8c4f:2260
init @ vue-router.esm.js?8c4f:2994
beforeCreate @ vue-router.esm.js?8c4f:1298
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
callHook @ vue.runtime.esm.js?2b0e:4235
Vue._init @ vue.runtime.esm.js?2b0e:5018
Vue @ vue.runtime.esm.js?2b0e:5099
eval @ main.ts?e4f2:13
./src/main.ts @ app.js:1078
__webpack_require__ @ app.js:854
fn @ app.js:151
1 @ app.js:1187
__webpack_require__ @ app.js:854
checkDeferredModules @ app.js:46
(匿名) @ app.js:994
(匿名) @ app.js:997
他 12 件のフレームを表示
vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of undefined (reading 'yearmonth')
at VueComponent._callee$ (ScheduleTable.vue?3cb7:21)
at tryCatch (runtime.js?96cf:63)
at Generator.invoke [as _invoke] (runtime.js?96cf:294)
at Generator.eval [as next] (runtime.js?96cf:119)
at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
at _next (asyncToGenerator.js?1da1:25)
at eval (asyncToGenerator.js?1da1:32)
at new Promise (<anonymous>)
at VueComponent.eval (asyncToGenerator.js?1da1:21)
at VueComponent.created (ScheduleTable.vue?3cb7:8)

ごろう
なげー

とりあえず長すぎる(笑)

こんなの読んでられないから、わかりやすそうなところから解読して修正を試みようか、入口からつぶしていこうか…

エラーを解読して修正することでどんどんスキルアップしていくから、これも必要投資なのである。(きっとそう)

Routerの順番を変更

とりあえず、最初に旗振り役のRouterが

import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import store from "@/store";
import { doLogin } from "@/services/authen/authen";
Vue.use(VueRouter);
const routes: Array<RouteConfig> = [
{
path: "/",
name: 'root',
redirect: '/home'
},
{
path: "/login",
name: "Login",
component: () =>
import("@/views/authen/Login.vue"),
},
{
path: "/home",
name: "Home",
component: () =>
import("@/views/Home.vue"),
},
// スケジュールをcatchAllの上に持ってくる
{
path: '/schedule',
name: 'schedule',
component: () =>
import("@/views/schedule/Schedule.vue"),
},
{
path: "/:catchAll(.*)",
redirect: "/lgoin"
},
];

これは、イージーミスでしたねー!ここまで一致しないすべてのリクエストをログインページにリダイレクトするってのが、スケジュールの上にあるからそりゃ表示されないですよね(笑)
とりあえず、上下順番を変更。

Djangoにリクエストがきていない!

Djangoに年月トランを取得するためのURLのリクエストが来ていないことがわかったので、asyncまで到達できているのかを確認しようと思う。

  async created() {
console.log('AAAAAAAAA')
const [error, response] = await this.$api.yearmonth.getSchedule(this.today)
if (!error && response) {
this.items = response
console.log(response)
}
}

これでコンソールに、AAAAAAAAAが表示されているのなら、urlのリクエストがいっているのかがわかる。

AAAAAAAAA
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "items" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.tance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

おー、AAAAAAAAが表示されているのでリクエストするところがおかしい…
これから、どうつぶしていこうか…

yearmonthを呼び出せていない?

コンソールで表示されているエラーのなかで気になったのが、yearmonthが見つからないってエラーです。

[Vue warn]: Error in created hook (Promise/async): "TypeError: Cannot read properties of undefined (reading 'yearmonth')"

ここからどう直したらいいかはわからないのです…とりあえず、翻訳とググって情報がでるかやってみる。

困っている人
いい情報がないぞー

こまったもんです…ググってもいい情報がありません…

exprot defaultすればどこからでも読み込みできるのではないの?

結局、解決にいたらず…

-Django

© 2022 ごろう@縁紡ぐ