Question

我是新来的，也许我在问一个简单的问题，但是我找不到答案。但是我非常需要这种解决方案。我试图通过使用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>

我的资产/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。

Answer 1

我已经检查过https://api.github.com/repos/waffleio/waffle.io/issues却没有找到任何response.data.bpi，因此将response.data.bpi替换为response

Answer 2

您控制台未定义的日志response.data.bpi。因此，response代替了控制台日志。然后，您可以找到一种找到bpi

的方法来找到bpi

Answer 3

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

我已经测试过并且可以正常工作。

如果屏幕空白，则表示您有其他问题。
打开控制台并检查错误。

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

3 个答案: