时间戳

首页 > 解决方案 > vue 用数组遍历对象

json - vue 用数组遍历对象

问题描述

我有这段代码。我想迭代一个带有数组的多个对象。没有显示返回数据。请帮我处理我的代码。

这是来自 api 的示例 json 数据：

"sections": [
        {
            "name": "Article",
            "position": 1,
            "contents": [
                {
                    "title": "Corporate Profile",
                    "body": "<p style=\"margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; text-align: justify; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat ligula vitae egestas ornare. Proin lobortis tempus bibendum. Nam porttitor, est sit amet molestie hendrerit, ipsum diam consequat augue, nec euismod metus felis eu est. Maecenas sollicitudin elit purus, non venenatis dui mollis ut. Nulla aliquet interdum interdum. Fusce ornare leo eu auctor aliquam. Donec vel elit nunc. Aenean molestie lectus vel euismod blandit. Nulla libero justo, bibendum ut eros nec, tempor volutpat sapien. Curabitur id justo quis ipsum interdum pharetra. Sed condimentum arcu odio, id tincidunt neque pretium in. Donec feugiat augue orci, id elementum justo feugiat nec.</p><p style=\"margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; text-align: justify; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px;\">Donec vel massa vitae est faucibus commodo. Donec eget elementum nulla, sit amet hendrerit libero. Vestibulum ullamcorper nibh in magna gravida, nec commodo ex commodo. Donec ut odio nibh. Suspendisse semper ornare orci id tempor. Nullam in ultrices diam, vel cursus justo. Aliquam erat volutpat. Cras consectetur, magna in vehicula iaculis, dolor metus porttitor sem, vitae volutpat orci nisl at mauris. Vivamus tincidunt rutrum velit in gravida. Nulla odio mi, hendrerit vitae velit quis, ultricies volutpat urna. Aliquam interdum libero velit, vel tempus lectus rutrum vitae. Morbi at mattis nibh. Sed finibus tortor at neque convallis, a tincidunt est finibus. Fusce purus risus, scelerisque et quam eget, varius gravida ex. Etiam consequat, lectus eu facilisis molestie, quam enim molestie felis, id commodo lectus ipsum non nunc. Mauris at luctus purus, vitae sodales ipsum.</p>",
                    "position": 1,
                    "_locale": "en"
                },
                {
                    "title": "Key Milestones",
                    "body": "<p style=\"margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; text-align: justify; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nulla mollis, interdum ipsum eu, tincidunt erat. Duis fringilla nibh est, vel pulvinar velit ornare non. Fusce ac rhoncus dolor. Ut cursus nunc ut efficitur convallis. Donec quis metus nec est euismod vestibulum. Vestibulum aliquam urna risus. Pellentesque fermentum leo vel posuere volutpat. Ut eleifend consectetur diam, vel interdum sapien.</p><p style=\"margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; text-align: justify; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px;\">Pellentesque ac elementum est, in consequat tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse eu ipsum tristique mauris vehicula pulvinar vitae ut sapien. Vestibulum non molestie mi. Nullam euismod eros magna, vel feugiat magna finibus id. Curabitur iaculis quis elit in hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam ligula mauris, tempor tristique ante a, posuere rhoncus ligula.</p><p style=\"margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 0px; text-align: justify; font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px;\">Quisque ut vulputate quam. Pellentesque tempor vestibulum justo, vitae fringilla purus porta vel. Cras nec pretium urna. Nunc faucibus molestie ante, non porta arcu consequat eget. Ut eget purus porttitor, accumsan urna eget, tempor felis. Nulla id tempus diam. Fusce ut arcu lacus. Pellentesque mollis eros nec porta posuere.</p>",
                    "position": 2,
                    "_locale": "en"
                }
            ],
            "section_type": {
                "code": "Article",
                "name": "Article"
            }
        }
    ],

我只想遍历sections.contents 对象数组。

async getContents() {
        let res = await this.$axios.get(`/page/${this.$route.params.slug}?token=9d04c2c980aab37a16976b463a3df8776e402444963bb92fd4456c1eca354xyz`);
        let datas = res.data.page.sections;
        if(res.data.success){
            this.datas = datas;
            console.log('sections', this.datas)
        }else{
            this.messages = res.messages;
        }
    },

<div class="row">
            <div class="col" v-for="(sub, ind) in datas.contents" :key="ind">
              <h3>{{ sub.title }}</h3>
              <p v-html="sub.body"></p>
            </div>
        </div>

标签： jsonloopsvue.jsobjectnuxt.js

解决方案

在您当前的代码中：datas.contents === undefined，因为 datas 是 section 数组，首先您需要选择要从中读取内容的对象的索引。datas[0].contents例如，以第一个对象的内容为目标。您可以先自动循环遍历sections 数组，然后遍历每个数组的内容，以便自动循环遍历不同的section 对象。

假设您希望每个“部分”都有一个新行，这应该有效：

<div class="row" v-for="(section, sectionIdx) in datas" :key="'section-'+ sectionIdx">
  <div class="col" v-for="(content, contentIdx) in section.contents" :key="'section-' + sectionIdx + '-content-' + contentIdx">
    <h3>{{ content.title }}</h3>
    <p v-html="content.address"></p>
  </div>
</div>

推荐阅读