laravel - Laravel 5.7 - 如何使用 axios.get 从 API 检索数据?
问题描述
我正在尝试从 Laravel Vue 组件中的 API 获取数据。我在控制台中收到此错误:
TypeError:无法设置未定义的属性“大陆”
我错过了什么?
这是我的代码:
<script>
export default {
mounted() {
console.log('Component mounted.');
},
created(){
this.loadData();
},
data() {
return {
continents: [],
}
},
methods: {
loadData: function() {
axios.get('/api/continents')
.then(function (response) {
// handle success
console.log(response.data);
this.continents = response.data;
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
},
},
}
</script>
解决方案
这是axios.get
请求的简单工作演示
var app = new Vue({
el: '#app',
data: {
users:[]
},
mounted(){
this.loadData();
},
methods:{
loadData:function(){
axios.get('https://jsonplaceholder.typicode.com/users').then(res=>{
if(res.status==200){
this.users=res.data;
}
}).catch(err=>{
console.log(err)
});
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<ol>
<li v-if="users.length>0" v-for="user in users">
{{ user.name }}
</li>
</ol>
</div>
推荐阅读
- react-native - 如何在段落中使 textAlign 居中
- php - 如何按日期对数据进行分组并使用php在html表格中显示
- python - Pandas - Finding Duplicate value of a column
- selenium-webdriver - Selenium Grid 并行执行 ThreadLocal WebDriver SessionNotCreatedException:无法创建新服务:GeckoDriverService
- python - 为什么熊猫替换在 df 切片中不起作用?
- python - 如何使用 xpath() 获取元素中的值?
- python-3.6 - 使用 Python 在 GUI 中显示循环周期计数
- linux - Unix script to replace old date with current date dynamically in multiple files present in a directory
- c++ - 代码块和视觉工作室中的不同输出
- nlp - 如何评估 Word2Vec 的性能?