I'm learning javascript and vue.js 3 composition API. My question is I simply want to get an array length and render at
. The array name : "getForms"
<script>.....
const forms_length = computed(() => getForms.value.length)
<template>....
<p> {{form_length}} </p>
I get an error "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')"
why? and what I should do?
Thank you for your help!
You should use the computed property this way
<template>
<p>Array length: {{ formsLength}}</p>
</template>
<script>
import { computed } from 'vue'
import {useFormsStore} from '../store/forms'
setup() {
const { store } = useFormsStore()
// if the store.forms array is undefined or not ready,
// then it returns an empty array
const getForms = computed(() => { return store.forms || []})
const formsLength = computed(() => getForms.value.length)
return {
formsLength
}
}
</script>
getFormsisimport {useFormsStore} from '../store/forms'andconst getForms = computed(() => { return store.forms})if I create an array likeconst getForm = computed(() => [ {id: 1, name: "aaa" }, { id: 2, name: "bbb"}, { id: 1, name: "ccc" }, {id: 1, name: "ddd" }, ])it works....store. Even if it's correct, it's specific to what store.forms is. The error means that store.forms is possibly undefined, or it could refer to another array. The error mentions a promise, but there's no promise in the code. Please, provide stackoverflow.com/help/mcve that can reproduce the problem.