如何从JSON获取数据？我的v-for循环无法正常工作

Question

我正在尝试从外部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>`

这就是我得到的：

Answer 1

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

Answer 2

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

每个dada in lists就像说lists[0]（或其他索引）。

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