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

问题描述 投票:0回答:3

我是新人,也许我在问简单的问题,但我找不到答案。但我非常需要这个解决方案。我尝试使用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。

laravel vue.js vuejs2 axis
3个回答
0
投票

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

我已经测试过它的确有效。

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


0
投票

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


0
投票

你控制日志response.data.bpi未定义。因此,而不是控制台日志只是response。然后你可以找到一种方法来找到bpi,如果有一个叫做bpi的东西

© www.soinside.com 2019 - 2024. All rights reserved.