Vue.js - How to use v-for in JSON array?

Question

I have JSON output from server:

[
    {"id":"2","name":"Peter","age":"24"}, 
    {"id":"4","name":"Lucy","age":"18"},
]

and now I want to use it with v-for directive, but it doesn't work for me.

Here is my export default:

data () {
    return {
        info: {}
    }
},

mounted () {
    axios
      .get('http://localhost:4000/fetch.php/')
      .then(response => (this.info = response.data))
},

And now if I want to display output of info, it works well {{ info }}.

But I need to use v-for directive and display only names.

<p v-if="info.name">{{ info.name }}</p>

But it is not working, only what is working is this: {{ info[0].name }}.

N'Bayramberdiyev · Accepted Answer · 2021-02-14 07:34:27Z

2

You cannot read the name property directly like this: info.name. Since the output is an array of objects rather than a single object.

data () {
    return {
        info: [], // make this an empty array
    }
},
mounted () {
    axios
        .get('http://localhost:4000/fetch.php/')
        .then(response => (this.info = response.data))
},

Then, you can render the info array in your template using v-for directive:

<ul v-if="info.length">
    <li v-for="item in info" :key="item.id">{{ item.name }}</li>
</ul>

Collectives™ on Stack Overflow

Vue.js - How to use v-for in JSON array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related