3

I am attempting to display a JSON response from PHP. I was pointed in the direction of the VueJS resource plugin. Unfortunately, the examples it gives are vague at best.

Is anyone able to provide a simple example of how to display the return JSON object in a list?

4
  • php.net/manual/en/function.var-dump.php Commented Jul 3, 2015 at 15:30
  • I have the json response that is produced from JSON_ENCODE with php. I need to know how to get and display it with vue.js. I have the vuejs resource plugin but I'm not sure how to get everything to work. Commented Jul 3, 2015 at 15:51
  • Ok, that's not what I thought then. I never used vue.js but you can log the json in the javascript console with console.log(), see this thread stackoverflow.com/questions/20500836/… Commented Jul 3, 2015 at 16:17
  • If you wanna display the JSON as it is, like string, i.e. "[....]", then TecBeast's answer is right. If you wanna iterate thru that JSON and render data i.e. to a table, then Samuel's answer is right. Commented Jan 26, 2016 at 17:28

3 Answers 3

2

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

[{id: 1, name: 'foo'},{id: 2, name: 'bar'}]
Sign up to request clarification or add additional context in comments.

Comments

0

In vue 1.0.1 you can use v-for instead of v-repeat like this:

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

Comments

0

I think you are looking for

{{ $data | json }}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.