我正在使用Vue Templating和新的Laravel 5.4。在我的 Office.vue 中,我有这段代码。
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
I'm an example component! {{ message}} | {{ type}} | {{ number }}
</div>
<span id="vue"></span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
return this.displayOffices();
},
data: function(){
return {
message: "aw",
type: "test",
number: 2
}
},
methods: {
displayOffices: function(){
this.$http.get('/vueOffice', function(course) {
console.log(course);
});
}
}
}
</script>
显示数据很好并且工作正常,但我的错误
未捕获的TypeError:无法读取未定义的属性'get'
位于此。$ http.get
我想要完成的是从该路由获取返回JSON数据的数据。
我需要帮助修复此错误,一直在尝试搜索答案,但每个人都有不同的方式来实现Vuejs。
答案 0 :(得分:2)
如果您使用的是axios
而不是vue-resource
,请将this.$http
替换为axios
。
答案 1 :(得分:1)
您必须先安装vue-resource才能使用this.$http.get
或者您可以安装axios并使用axios.get
代替this.$http.get
答案 2 :(得分:0)
不推荐使用它。$ http.get因为Vue想要不再支持它。他们建议使用axios使用库。然后,您可以使用this.axios.get()
。
self.axios
.get(apiUrl, {
params: this.formData,
})
.then((response) => {
});
答案 3 :(得分:0)
另一种方法是将以下代码添加到您的文件中:
Vue.prototype.$http = axios;
答案 4 :(得分:0)
将此 require('vue-resource');
添加到您的档案中
为/resources/assets/js/bootstrap.js
之后:
window.Vue = require('vue');