javascript v-for遍历嵌套数组

c3frrgcw 于 2023-04-19 发布在 Java

关注(0)|答案(1)|浏览(100)

在一个列出的元素中，我试图实现一个v-for循环，它应该迭代script部分中的项。
HTML代码看起来像这样：

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

脚本部分如下所示：

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

但是，使用这种方法不会显示任何内容，也不会出现错误。
如果我从includedItems中删除嵌套数组，它会按预期工作。
有人知道我做错了什么吗？谢谢。

JavaScript

来源：https://stackoverflow.com/questions/76029608/v-for-looping-through-nested-arrays

1条答案

按热度按时间

xxhby3vn1#

像下面的代码片段一样尝试。（basicPackage是icludedItems数组中第一个对象的属性）

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>

赞(0）回复(0）举报 2023-04-19

我来回答

javascript v-for遍历嵌套数组

1条答案

相关问题

热门标签

最新问答