vuejs loop through two dimensional array

Viewed 75

i have two dimensional array like this:

Array that i get back from Api Call

and i want to loop through via VueJS here is my Code:

<ul>
    <li v-for="topCat in allCats" :key="topCat.id">
        <li v-for="subCat in topCat" :key="subCat.id">
            {{subCat.name}}
        </li>
     </li>
</ul>

data: function() {
            return {
                allCats: {},
            }
        },

 mounted() {
            axios.get('/api/getAllCats')
            .then(response => {
                this.allCats = response.data.allCats;
                console.log(this.allCats);
            })
        }

and this is the error code that i can see in the browser console:

"Property or method "topCat" is not defined on the instance but referenced during render."

Does anyone know how i can fix that?

1 Answers

Try out to get access to the sub_cats inside the nested loop :

<ul>
    <li v-for="topCat in allCats" :key="topCat.id">
        <ul>
         <li v-for="subCat in topCat.sub_cats" :key="subCat.id">
            {{subCat.name}}
         </li>
       </ul>
     </li>
</ul>

Related