Vue中v-for遍历嵌套数组无内容显示的问题求助

错误原因 #

• 数据结构访问错误：你定义的icludedItems是一个数组（外层用[]包裹），内部仅包含一个对象。模板中直接通过icludedItems.basicPackage访问，本质是在数组上找basicPackage属性，而数组本身没有这个属性，导致无法获取数据。
• 遍历项取值错误：basicPackage是字符串数组，遍历得到的item就是单个字符串，你写{{ item.basicPackage }}会试图访问字符串的basicPackage属性，这显然不存在，所以无法渲染内容。

修正方案 #

方案1：保留数组结构（不推荐，属于没必要的嵌套）

修改模板，先取数组的第一个元素再访问basicPackage，同时直接渲染遍历到的字符串：

<li v-for="(item, index) in icludedItems[0].basicPackage" :key="index" class="flex items-center space-x-3">
  <!-- Icon -->
  <IconsCheck />
  <span>{{ item }}</span>
</li>

方案2：优化数据结构（推荐）

icludedItems本身不需要是数组，直接改成对象更符合业务逻辑，这样模板可以直接正常访问：
修正后的Script代码

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'),
      ],
    }
  };
},

修正后的HTML模板

<li v-for="(item, index) in icludedItems.basicPackage" :key="index" class="flex items-center space-x-3">
  <IconsCheck />
  <span>{{ item }}</span>
</li>

注意：添加:key是Vue的强制要求，用于优化列表渲染并避免控制台警告。

内容的提问来源于stack exchange，提问作者Benedikt Urcan