v-for looping through nested arrays

April 16, 2023

In a listed element I’m trying to implement a v-for loop which should iterate the items in the script section.

The HTML code looks like this:

<li
   v-for="item in icludedItems.basicPackage"
   class="flex items-center space-x-3">
   <!-- Icon -->
   <IconsCheck />
   <span>{{ item.basicPackage }}</span>
 </li>

Script sections looks like this:

data() {
    return {
      icludedItems: [
        {
          freePackage: [
            this.$t('pricing.packages.free.includedUsers'),
            this.$t('pricing.packages.free.includedModules'),
            this.$t('pricing.packages.free.includedLocations'),
            this.$t('pricing.packages.free.includedProviders'),
          ],
          basicPackage: [
            this.$t('pricing.packages.basic.includedUsers'),
            this.$t('pricing.packages.basic.includedModules'),
            this.$t('pricing.packages.basic.includedLocations'),
            this.$t('pricing.packages.basic.includedProviders'),
          ],
          advancedPackage: [
            this.$t('pricing.packages.advanced.includedUsers'),
            this.$t('pricing.packages.advanced.includedModules'),
            this.$t('pricing.packages.advanced.includedLocations'),
            this.$t('pricing.packages.advanced.includedProviders'),
          ],
          premiumPackage: [
            this.$t('pricing.packages.premium.includedUsers'),
            this.$t('pricing.packages.premium.includedModules'),
            this.$t('pricing.packages.premium.includedLocations'),
            this.$t('pricing.packages.premium.includedProviders'),
          ],
        },
      ],
    };
  },

However, with this approach no content will be displayed, but also no error.

If I’m removing the nested arrays from includedItems it works as expected.

Anyone a idea what I’m doing wrong? Thanks. 🙂

>Solution :

Try like following snippet. (basicPackage is property from the first object in icludedItems array)

const app = Vue.createApp({
  data() {
    return {
      icludedItems: [
        {
          freePackage: [
            1,2,3,4
          ],
          basicPackage: [
            5,6,7,8
          ],
          advancedPackage: [
            9,10,11,12
          ],
          premiumPackage: [
            13,14,15,16
          ],
        },
      ],
    };
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <ul>
    <li v-for="item in icludedItems[0].basicPackage">
      <span>{{ item }}</span>
    </li>
  </ul>
</div>