[Vuejs]-Vue.js โ€“ How to use v-for in JSON array?

4๐Ÿ‘

โœ…

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>

Read more about List Rendering in Vue.

Leave a comment