如何从 JSON 中获取数据？我的 v-for 循环不工作答案

【问题标题】：How to get data from JSON? My v-for loop is not working如何从 JSON 中获取数据？我的 v-for 循环不工作
【发布时间】：2019-06-05 17:57:53
【问题描述】：

我正在尝试从外部 json 获取数据，但 v-for 循环不起作用。以前，使用相同的代码，我能够显示我不知道现在发生了什么的数据。

这是我正在使用的代码：

    <div class="row">

        <div class="col-sm-4">
            <h1>Llista Valors</h1>

            <div class="card" style="margin-bottom: 2%" v-for="dada in list">
                <div class="card-header">
                    Hora: {{dada.lists.hora}}
                    Preu: {{dada.lists.preu}}
                </div>
            </div>
        </div>

        <div class="col-sm-8">
            <h1>JSON</h1>

            <pre>
                {{ $data }}
            </pre>

        </div>

    </div>

</div>`

    var url = "http://172.17.100.3/api/tarifa2.php";

    new Vue({

        el: '#main',
        created: function () {
            this.getApi();
        },
        data: {
            lists: []
        },
        methods: {
            getApi: function () {

                this.$http.get(url).then(function (response) {
                    this.lists = response.body.valors;

                });
            }

        }

    });

</script>`

这是我得到的：

【问题讨论】：

Need help parsing imported json data with VUE.JS JavaScript的可能重复

标签： vue.js

【解决方案1】：

您的数据应称为list:[]，而不是lists:[]，以匹配您的模板。或者将您的模板重命名为in lists。

【讨论】：

您还必须在 getApi() 函数中更改它。

【解决方案2】：

对于每个dada in lists，没有dada.lists.hora 或dada.lists.preu。只有dada.preu 或dada.hora。

每个dada in lists 就像在说lists[0]（或任何索引）。

因此，请尝试根据需要将模板更改为 {{data.hora}} 等（在按照上述进行列表/列表调整之后）。

【讨论】：