Question

我尝试显示来自GitHub问题的信息。我将axios用于REST API的GET。我尝试从此https://api.github.com/repos/waffleio/waffle.io/issues

获取信息

我的.vue文件：

<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>

我在chrome上看到空白页。但是，请在浏览器控制台中获取以下信息：

列表已加载
    app.js：43280列表加载
    app.js：40402下载Vue Devtools扩展以获得更好的开发体验：
    https://github.com/vuejs/vue-devtools
    app.js：40413您正在开发模式下运行Vue。
    部署生产时，请确保打开生产模式。
    在https://vuejs.org/guide/deployment.html上查看更多提示
    app.js：43282（30）[{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{ …}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…} ，{…}，{…}，{…}，{…}，{…}，{…}，{…}]
    app.js：893 XHR已完成加载：GET“ https://api.github.com/repos/waffleio/waffle.io/issues”。

我花了几个小时解决这个问题。我尝试了不同的示例，但仍然无法正常工作。我在哪里犯错？为什么我无法在{{list}}上显示数据？我尝试了v-for，但无济于事。我是vuejs的新手。

Answer 1

在Vue.js中，模板必须具有Single Root Element。由于此要求，仅呈现您的h1标签。要解决此问题，您可以将模板包装在自己的div中，如下所示：

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

使用此方法，list将被呈现为数组的字符串表示形式。如您在帖子中所建议的那样，最好使用v-for为li中的每个项目创建一个单独的list。

Vue.js麻烦，无法从axios.get显示数组

1 个答案: