Laravel vuejs axios response.data Я не могу отобразить данные - PullRequest
Новая
       12

Laravel vuejs axios response.data Я не могу отобразить данные

0 голосов
/ 30 августа 2018

Я новичок, может быть, я задаю простой вопрос, но я не могу найти ответ. Но мне очень нужно это решение. Я пытаюсь получить данные о проблемах репозитория github с помощью rest api, но не могу это отобразить. Я не знаю почему, я пытался найти решения, но я не могу найти правильный ответ.

Файл My 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>

Но я получаю только это: введите описание изображения здесь

Шаблон моего клинка: 

<!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'
});

Я изменил в активах / 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';

Я хочу отобразить данные https://api.github.com/repos/waffleio/waffle.io/issues в списке ul, li. Что мне делать? Затем я просто устанавливаю свежую Larave и запускаю следующие команды: npm install, npm run watch.

Ответы [ 3 ]

0 голосов
/ 30 августа 2018

Ваш консольный журнал response.data.bpi, который не определен. Так что вместо этого журнала консоли просто response. Тогда вы можете найти способ найти bpi, если есть вещь под названием bpi

0 голосов
/ 30 августа 2018

Заменить this.info = response.data.bpi; на this.info = response.data;

Я проверял, и это работает.

Если у вас пустой экран, это означает, что у вас другая проблема.
Откройте консоль и проверьте ошибки.

0 голосов
/ 30 августа 2018

Я проверил https://api.github.com/repos/waffleio/waffle.io/issues и не нашел response.data.bpi, поэтому замените response.data.bpi на response

...