我似乎无法获得与vueify一起使用的vue资源。我已经定义了一个我在main.js文件中包含的vue组件。
import Vue from 'vue'
import MyComponent from './my-component.vue'
new Vue({
el: '#app',
components: {
myComponent: MyComponent
}
});
我的vue组件文件如下所示:
<script>
import Vue from 'vue';
// import VueResource from 'vue-resource'
// Vue.use(VueResource);
export default {
template: '#my-component-template',
created: () => {
Vue.$http.get('/my/api/123',
data => {
console.log(data)
}, err => {
console.log("Error");
console.error(err);
}
);
}
}
</script>
在当前状态下,我收到此错误:
Uncaught TypeError: Cannot read property 'get' of undefined
如果我在组件文件中注释掉有关vue-resource的两行,我收到的错误就是这样:
Uncaught TypeError: Cannot redefine property: $url
的package.json:
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.6",
"gulp": "^3.9.1",
"laravel-elixir": "^5.0.0",
"laravel-elixir-vueify": "^1.0.3",
"vue": "^1.0.25",
"vue-resource": "^0.8.0"
}
}
Gulpfile:
var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
elixir(function(mix) {
mix.browserify('main.js');
});
所有关于SO的现有答案都没有带来任何结果。请帮忙。
答案 0 :(得分:4)
您应该将$http
替换为http
:
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
export default {
created: () => {
Vue.http.get(...)
}
}
此外,将VueResource
安装到main
文件中是一种很好的做法,然后我们可以使用this
关键字@Jeff说。
要实现这一点,您应该更改arrow function
,因为this
引用了全局对象:
// refers to the global object
created: () => {}
// refers to the Vue component
created () {
this.$http.get(...)
}
答案 1 :(得分:3)
您是否尝试在根vue实例中添加var VueResource = require('vue-resource');
?还要添加Vue.use(VueResource)
。
答案 2 :(得分:1)
使用main.js
在Vue.use(VueResource)
中添加插件后,会将$http
属性添加到所有Vue实例中。您不需要在组件文件中重新执行此操作。然后你只需使用this.$http
:
created: () => {
this.$http.get('/my/api/123',
//...
);
}