javascript - Vue 3 (composition API) get array length - Stack Overflow

I'm learning javascript and vue.js 3 position API. My question is I simply want to get an array length and render at

. The array name : "getForms"

<script>.....
const forms_length = puted(() =>  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!

I'm learning javascript and vue.js 3 position API. My question is I simply want to get an array length and render at

. The array name : "getForms"

<script>.....
const forms_length = puted(() =>  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!

• javascript
• arrays
• vue.js
• vue-position-api

Share Improve this question Follow asked May 19, 2022 at 17:54 be ablebe able 8122 silver badges1010 bronze badges 4

• could you show us where getForms is – Ilijanovic Commented May 19, 2022 at 17:57
• Thank you Ifaruki! It's ing from pinia, import {useFormsStore} from '../store/forms' and const getForms = puted(() => { return store.forms}) if I create an array like const getForm = puted(() => [ {id: 1, name: "aaa" }, { id: 2, name: "bbb"}, { id: 1, name: "ccc" }, {id: 1, name: "ddd" }, ]) it works.... – be able Commented May 19, 2022 at 18:38
• The question should contain all the relevant code. You're still missing the line that defines 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./help/mcve that can reproduce the problem. – Estus Flask Commented May 19, 2022 at 18:42
• Sorry Estus Flask, This is first time I've posted, actually created my account. I'll be careful next time. Thanks – be able Commented May 19, 2022 at 20:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You should use the puted property this way

<template>
  <p>Array length: {{ formsLength}}</p>
</template>
<script>
  import { puted } 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 = puted(() => { return store.forms || []})
    const formsLength = puted(() => getForms.value.length)

    return {
      formsLength
    }
  }
</script>