我是新人,也许我在问简单的问题,但我找不到答案。但我非常需要这个解决方案。我尝试使用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.data;
我已经测试过它的确有效。
如果您有空白屏幕,则表示您遇到了其他问题。 打开控制台并检查错误。
我检查了https://api.github.com/repos/waffleio/waffle.io/issues并且没有找到任何response.data.bpi
所以用response.data.bpi
替换response
你控制日志response.data.bpi
未定义。因此,而不是控制台日志只是response
。然后你可以找到一种方法来找到bpi
,如果有一个叫做bpi
的东西