Question

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

是否有人能够提供如何在列表中显示返回JSON对象的简单示例？

Answer 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'}]

Answer 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>

Answer 3

我认为你在寻找

{{ $data | json }}

VueJS资源插件示例

3 个答案: