Question

如何在下面的示例中正确访问stage.name的嵌套json？

您可以在我尝试访问阶段名称的模板中看到。

vue.js

created() {
    url="http://{{ api_endpoint }}"
    fetch(url)
        .then(response => response.json())
        .then(body => {
            for(i=0; i<body.length; i++){
                this.job_execs.push({
                    'name': JSON.stringify(body[i].job.name),
                    'build_id': JSON.stringify(body[i].build_num),
                    'env': JSON.stringify(body[i].job.env),
                })
            }
    })



template: `
      <li v-for="item in this.job_execs">
        [[ item.build_num ]]
        <li v-if="stage in item.job">
          [[ stage.name ]]
        </li>
      </li>
    </ul>

示例api

[
    {
        "build_num": 12,
        "job": {
            "name": "test-job",
            "env": "DEV",
            "tool": {
                "env": "DEV",
            },
            "product": {
                "name": "vuejs"
            },
            "platform": {
                "name": "none"
            },
            "stage": [
                {
                    "name": "stage1"
                },
                {
                    "name": "stage2"
                },
                {
                    "name": "stage3"
                },
            ]
        },
]

我猜我需要在创建的钩子中创建一个新列表并开始推送阶段名称吗？但是，我将有两个清单？不确定什么是最好的方法。

Answer 1

如果您要为每个阶段创建一个<li>，则将是：

<li v-for="stage in item.job.stage">
  [[ stage.name ]]
</li>

请注意v-for，而不是v-if。

您可以将v-for视为等效的模板：

item.job.stage.forEach(stage => {
    // ...
})

如果只想要第一个，那就是：

<li>
  [[ item.job.stage[0].name ]]
</li>

如果您确实想要创建第二个列表的想法，则应使用计算属性来执行此操作，而无需在created钩子中执行任何操作。在该计算的属性中，您可以将数据缩减为更易于在模板中使用的格式。在这种情况下，我不确定是否需要这样做，但是如果您的需求比您发布的示例代码更复杂，那么这可能是一个好方法，而不是编写复杂的模板。

更新：

因此，完全是这样：

<ul>
  <li v-for="item in job_execs">
    [[ item.build_num ]]
    <ul>
      <li v-for="stage in item.job.stage">
        [[ stage.name ]]
      </li>
    </ul>
  </li>
</ul>

在您的JavaScript代码中，不需要所有JSON.stringify东西。

fetch(url)
    .then(response => response.json())
    .then(body => {
        this.job_execs = body
    })

如果您想要更接近原始代码（将build_num重命名为build_id），则可以使用多种选择，例如：

fetch(url)
    .then(response => response.json())
    .then(body => {
        for (let i = 0; i < body.length; i++) {
            this.job_execs.push({
                build_id: body[i].build_num,
                job: body[i].job
            })
        }
    })

然后，您需要在模板中将build_num称为build_id。

我个人更倾向于使用forEach，for / of或map而不是直接的for循环。例如：

fetch(url)
    .then(response => response.json())
    .then(body => {
        this.job_execs = body.map(item => {
            return {
                build_id: item.build_num,
                job: item.job
            }
        })
    })

仅当您确实需要转换数据格式时，所有这些操作才是必需的。否则，请坚持使用this.job_execs = body。

在此示例中，如何使用vue.js访问嵌套的json？

1 个答案: