[Vuejs]-How can I populate nested different content inside v-for loop

by

0👍

✅

There is no need to loop a second time through the categories inside each expansion panel. Instead loop the category.allItems array from the category object you accessed in the first v-for. Here is an example:

<v-expansion-panels>
  <v-expansion-panel v-for="category in categories" :key="category.name">
    <v-expansion-panel-header>
      {{ category.name }}
    </v-expansion-panel-header>
     <v-expansion-panel-content>
        <div v-for="item in category.allItems">
             {{ item.name }}
        <div>
     </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

I haven’t tested this but try and let me know if it works.
This should fill each expansion panel content with <div>s that contain all the items in the respective category.

Leave a comment