eharvey71
commented
5 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">
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?