testdrivenio / fastapi-vue

Single Page App with FastAPI and Vue.js
MIT License
265 stars 104 forks source link

Vue Error after login #20

Open choncba opened 7 months ago

choncba commented 7 months ago

I've created a user from Swagger Docs, then after login on front I get this error:

ERROR Cannot read properties of null (reading 'length') TypeError: Cannot read properties of null (reading 'length') at Proxy.render (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/DashboardView.vue?vue&type=template&id=cabbb9e2:66:296) at renderComponentRoot (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:940:38) at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5320:46) at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:217:19) at instance.update (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5433:16) at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5443:5) at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5237:7) at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5203:9) at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4878:11) at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5402:9)

Maybe the API call to get the notes is done after it is evaluated by Vue?

eharvey71 commented 7 months ago

I just had this problem when going through the tutorial yesterday. Since the length property might be null when doing the conditional rendering in the DashboardView.vue view, it helps to just check if the data is not null before checking a property. I added this and it seemed to work:

<div v-if="notes && notes.length">

from the original:

<div v-if="notes.length">


OR you could simply do

<div v-if="notes">

su322 commented 1 week ago

thanks.