CODEWITHSUNDEEP
vue.js
evaldas.z.o
evaldas.z.o

Reputation: 57

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

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.

Upvotes: 1

Views: 769

Answers (1)

Kirk Larkin
Kirk Larkin

Reputation: 93183

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.

Upvotes: 1

Related Questions