VueJS 资源插件示例答案

【问题标题】：VueJS Resource plugin exampleVueJS 资源插件示例
【发布时间】：2015-09-21 11:04:09
【问题描述】：

我正在尝试显示来自 PHP 的 JSON 响应。我被指向了 VueJS 资源插件的方向。不幸的是，它给出的例子充其量是模糊的。

有谁能提供一个简单的例子来说明如何在列表中显示返回的 JSON 对象？

【问题讨论】：

php.net/manual/en/function.var-dump.php
我有从 JSON_ENCODE 和 php 生成的 json 响应。我需要知道如何使用 vue.js 获取和显示它。我有 vuejs 资源插件，但我不确定如何让一切正常工作。
好吧，那不是我当时的想法。我从未使用过 vue.js，但您可以使用 console.log() 在 javascript 控制台中记录 json，请参阅此线程 stackoverflow.com/questions/20500836/…
如果您想按原样显示 JSON，如字符串，即“[....]”，那么 TecBeast 的答案是正确的。如果您想遍历该 JSON 并将数据呈现到表格中，那么 Samuel 的答案是正确的。

【解决方案1】：

HTML：

<table id="list-items">
    <tr v-for="item in items">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
    </tr>
</table>

JS：

new Vue({
    el: '#list-items',
    data: {
        items: []
    },
    ready: function() {
        this.items = this.getItems();
    },
    methods: {
        getItems: function() {
            this.$http.get('items.php', function(data){
                this.items = data;
            });
        }
    }
});

items.php 必须返回一个 JSON 编码的数组，如下所示：

[{id: 1, name: 'foo'},{id: 2, name: 'bar'}]

【讨论】：

【解决方案2】：

在 vue 1.0.1 中，您可以像这样使用 v-for 而不是 v-repeat：

<table id="list-items">
  <tr v-for="item in items">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
  </tr>
</table>

【讨论】：

【解决方案3】：

我想你正在寻找

{{ $data | json }}

【讨论】：