Laravel vuejs axios response.data 我无法显示数据答案

【问题标题】：Laravel vuejs axios response.data I can not display dataLaravel vuejs axios response.data 我无法显示数据
【发布时间】：2018-08-30 10:53:43
【问题描述】：

我是新手，也许我在问简单的问题，但我没有找到答案。但我非常需要这个解决方案。我尝试使用 rest api 从 github repo 问题中获取数据，但我无法显示。我不知道为什么，我试图找到解决方案，但我没有找到正确的答案。

我的 Laravel Ilist.vue 文件：

<template>
    <h1>List</h1>
<ul>
    <li v-for="issue in info">

    {{ issue.url }}:
    </li>
</ul>
</template>

<script>
    export default {
        data () {
            return {
                info: null
            }
        },
        mounted () {
            axios
                .get('https://api.github.com/repos/waffleio/waffle.io/issues')
                .then((response) => {
                    console.log(response.data.bpi);
                    this.info = response.data.bpi;
                })
        }
    }
</script>

但我只得到这个： enter image description here

我的刀片模板：

<!doctype html>
    <head>
        <meta charset="utf-8">
        <title>Laravel</title>

        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            <div id="app">
                <ilist></ilist>
            </div>
        </div>
    <script src="/js/app.js"></script>
    </body>
</html>

我的 assets/js/app.js 文件：

require('./bootstrap');

window.Vue = require('vue');

let axios = require('axios');
Vue.component('ilist', require('./components/Ilist.vue'));

const app = new Vue({
    el: '#app'
});

我更改了 assets/js/bootstrap.js

// let token = document.head.querySelector('meta[name="csrf-token"]');
//
// if (token) {
//     window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
// } else {
//     console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
// }

window.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

我想在 ul,li 列表中显示 https://api.github.com/repos/waffleio/waffle.io/issues 数据。我应该怎么做？然后我只需安装新的 Larave，然后运行这些命令：npm install、npm run watch。

【问题讨论】：

将this.info = response.data.bpi;更新为this.info = response;
你得到一个数组作为 response.data。这就是 response.data.bpi 未定义的原因
好的。我更改了 Ilist.vue：mounted () { axios .get('api.github.com/repos/waffleio/waffle.io/issues') .then((response) => { console.log(response); 这个。 info = response; }) } 但我仍然得到空白屏幕

标签： laravel vue.js vuejs2 axis

【解决方案1】：

将this.info = response.data.bpi; 替换为this.info = response.data;

我已经测试过了，它可以工作。

如果您出现空白屏幕，则表示您遇到了不同的问题。
打开你的控制台并检查错误。

【讨论】：

【解决方案2】：

我检查了https://api.github.com/repos/waffleio/waffle.io/issues，但没有找到任何response.data.bpi，所以将response.data.bpi 替换为response

【讨论】：

好的。我更改了 Ilist.vue:mounted () { axios .get('api.github.com/repos/waffleio/waffle.io/issues') .then((response) => { console.log(response); this.info = response; }) } 但我仍然得到空白屏幕

【解决方案3】：

您的控制台日志response.data.bpi 未定义。所以不是那个控制台日志只是response。然后你可以想办法找到bpi，如果有一个东西叫bpi

【讨论】：