Clever Geek Handbook

VueJS Resource Plugin Example

I am trying to display a JSON response from PHP. I was directed towards the VueJS resource plugin. Unfortunately, the examples he gives are vague at best.

Can anyone provide a simple example on how to display the returned JSON object in a list?

+3


source to share


3 answers


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 should return a JSON encoded array like this:

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


source


In vue 1.0.1, you can use v-for

instead v-repeat

like this:



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


source


I think what you are looking for

{{ $data | json }}
0


source






More articles:


All Articles