如何访问每个 JSON 对象的属性？

Question

所以我正在使用 Axios 进行 API 调用，并将 JSON 响应推送到一个空数组。 我在访问每个对象的各个属性时遇到问题。 `

        <div class="wrapper">
            <div class="row">
                <div v-for="group in groups" :key="group.id">
                    <div class="col-md-4 cards">
                        <h3>{{ group[1].name }}</h3>
                        <h3>{{ group.name }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

然后我的js是

import axios from 'axios'
export default {
    name: 'app',
        data () {
            return {
                groups: [],
                loading: false
            }
        },
        methods: {
            getHomes: function() {
                this.loading = true;
                axios.get("*******")
                    .then((response) =>{
                        this.loading = false;
                        this.groups.push(response.data);
                        // console.log(this.groups)
                    }, (error) => {
                        this.loading = false;
                    })

            },

我可以通过对数组索引进行硬编码来访问每个单独的 group.name，但是我在动态访问它们时遇到了问题。

这是响应的图片

Answer 1

而不是这样做：

.then((response) =>{
  this.loading = false;
  this.groups.push(response.data);
}, (error) => {
  this.loading = false;
})

只需将 response.data 分配给 groups 变量。

.then((response) =>{
  this.loading = false;
  this.groups = response.data;
}, (error) => {
  this.loading = false;
})

在你的模板中：

<div v-for="(group, index) in groups" :key="index">
  <div class="col-md-4 cards">
    <h3>{{ group.name }}</h3>
    <h4>{{ group.url }}</h4>
  </div>
</div>

您无法访问该项目的原因是因为您将对象数组推送到数组中，因此您需要遍历另一个数组中的数组。

Answer 2

在您的示例数据集中，您在 Axios 调用中获得的response.data似乎已经是一个数组。 你应该这样做。

"use strict";

import Vue from "vue";
import Axios from "axios";

export default Vue.component({
    data() {
        return {
            groups: [],
            loading: false
        };
    },

    created() {
        this.loading = true;

        axios.get("https://somwhere.com/api/something").then(response => {
            this.groups = response.data;
        }).finally(() => this.loading = false);
    }
});

此外，您应该在finally块中取消加载。 我主动添加了它，以便您可以看到它是如何完成的，即使它超出了问题的范围。