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

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.

CodePudding user response：

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>