Vue.js trouble, cannot display array from axios.get

Question

I try to display info from GitHub issues. I use axios for GET from REST API. I try to get info for example from this https://api.github.com/repos/waffleio/waffle.io/issues

My .vue file:

<template>
    <h1>List</h1>
    <ul>{{ list }}</ul>
</template>
<script>
    export default {
        data: function (){
            return {
                list: [],
            }
        },
        mounted: function () {
            console.log('List loaded');
            // fetch("https://api.github.com/repos/waffleio/waffle.io/issues")
            //     .then(response => response.json()).then((data) => {this.list = data;})
            this.fetchList();
        },
        methods: {
            fetchList: function () {
                console.log('List loading');
                    axios.get('https://api.github.com/repos/waffleio/waffle.io/issues')
                        .then((response) => {
                            console.log(response.data);
                            // this.list = response;
                            this.list = response.data;
                        }).catch((error) => {
                            console.log(error);
                        });
            },
        }
    }
</script>

I get blank page at chrome. But in browser console get this things:

List loaded
app.js:43280 List loading
app.js:40402 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
app.js:40413 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
app.js:43282 (30) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
app.js:893 XHR finished loading: GET "https://api.github.com/repos/waffleio/waffle.io/issues".

I spend some hours at this problem. I try different examples, but still it dont working. Where I am doing mistakes? Why I cannot display data at {{list}}? I tried a v-for but it does not help. I am new on vuejs.

Your <template> should have only one root element (in your case you can wrap the h1 and ul in a div); aren't you seeing any errors related to this, like Component template should contain exactly one root element? — yuriy636
– yuriy636, Commented Aug 30, 2018 at 13:01

tony19 · Accepted Answer · 2022-07-16 02:17:32Z

1

In Vue.js, templates must have a Single Root Element. Because of this requirement, only your h1 tag is being rendered. To fix this, you can wrap your template in its own div, like this:

<template>
    <div>
        <h1>List</h1>
        <ul>
            {{ list }}
        </ul>
    </div>
</template>

Using this, list will be rendered a string-representation of the array. As you suggested in your post, you'll be better off using v-for to create an individual li for each item in list.

edited Jul 16, 2022 at 2:17

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 30, 2018 at 13:05

Kirk Larkin

94.4k17 gold badges235 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js trouble, cannot display array from axios.get

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