在这个例子中如何使用 vue.js 访问嵌套的 json？

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"
                },
            ]
        },
]

我猜我需要在 created 钩子中创建一个新列表并开始推送舞台名称？但是然后我会有两个列表？不确定执行此操作的最佳方法是什么。

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。