VueJS: Cannot read properties of undefined (reading 'foo')"

Question

My v-for loop looks like this:

<ul v-if="item.categorie_string">
    <li v-for="(cat_int,index) in item.categorie_string.split(',')" :key="index">
        {{myarray[cat_int].categoryname}}
    </li>
</ul>

Variable categorie_string can be a string like ='1,2,3', ='5' or = NULL

To prevent the error where categorie_string == null I added v-if="item.categorie_string" to the parent element <ul> but I still get:

Cannot read properties of undefined (reading 'categoryname')"

Shouldn't this be working? It works fine if I test it with an integer instead of cat_int.

If myarray has three elements, then categorie_string should be "0,1,2" and "1,2,3" will give undefined on the last iteration. — Dave Pile
– Dave Pile, Commented Sep 1, 2022 at 11:04
Good point @Dejan.S, yes 'myarray' is populated by default. The issue was really just cat_int being empty. I could solve it with Laurens solution. — Dominic
– Dominic, Commented Sep 1, 2022 at 11:30

Laurens · Accepted Answer · 2022-09-01 10:44:34Z

1

You should also check if myarray[cat_int] exists:

<ul v-if="item.categorie_string">
    <li v-for="(cat_int,index) in item.categorie_string.split(',')" :key="index">
        <span v-if="myarray[cat_int]">{{myarray[cat_int].categoryname}}</span>
    </li>
</ul>

answered Sep 1, 2022 at 10:44

Laurens

2,61713 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dejan.S Over a year ago

You don't need a span just for a v-if, you can use <template v-if=""></template>

Collectives™ on Stack Overflow

VueJS: Cannot read properties of undefined (reading 'foo')"

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related