类型错误:无法读取未定义的属性“$http" [英] TypeError: Cannot read property '$http' of undefined
问题描述
尝试使用 vue-resource，但我遇到了标题中描述的错误.下面的代码位于名为 network.js 的 utils 部分:
从 'vue-resource' 导入 VueResourceconst getConfig = () =>{console.log('它的工作');//获取/someUrlthis.$http.get('https://fdsdfsdf-685a-45ed-8665-9847e0dbce0d.mock.pstmn.io/getConfig').then(响应 => {//获取身体数据this.config = response.body;}, 响应 =>{//错误回调});};//导出登录以便其他类可以使用它出口{获取配置}这是调用它的代码.它存在于我名为 Admin.vue 的路由之一中:
<div class="admin"><h1>这是管理页面区域</h1><p>这是数据:{{this.config}}</p></模板><脚本>从../utils/network"导入{getConfig}；导出默认{数据:函数(){返回 {配置:[{}]}},创建:功能(){获取配置()；}}
我按照他们在示例中的描述使用它，但我不确定我缺少什么?
network.js缺少对Vue.use(VueResource)的调用，如 记录用于 Webpack 项目:从'vue'导入Vue从 'vue-resource' 导入 VueResourceVue.use(VueResource)而
getConfig()是一个箭头函数，它永久绑定一个词法this(调用者无法重新绑定this)，并且this在undefinednetwork.js的范围.如果您打算让调用者(即组件)通过
Function.prototype.call，您必须将getConfig声明为常规函数://network.jsconst getConfig = function() { ... }//选项 1function getConfig() { ... }//选项 2//MyComponent.vue >脚本从'../utils/network.js' 导入 { getConfig }导出默认{创建(){getConfig.call(this)}}另一种解决方案是使用 mixins 以便您可以调用
this.getConfig()(不传递上下文)://network.jsconst getConfig = function() { ... }//选项 1function getConfig() { ... }//选项 2const getConfigMixin = {方法: {获取配置}};导出 { getConfigMixin }//MyComponent.vue >脚本从'../utils/network.js' 导入 { getConfigMixin }导出默认{混合:[getConfigMixin]，创建(){this.getConfig()}}
Trying to use vue-resource but i am etting the error described in the title. The code below is in utils section called network.js:
import VueResource from 'vue-resource'
const getConfig = () =>{
console.log('its working');
// GET /someUrl
this.$http.get('https://fdsdfsdf-685a-45ed-8665-9847e0dbce0d.mock.pstmn.io/getConfig')
.then(response => {
// get body data
this.config = response.body;
}, response => {
// error callback
});
};
//Export login so other classes can use it
export{
getConfig
}
And this the code where it gets called. It exists in one of my routes called Admin.vue:
<template>
<div class="admin">
<h1>This is admin page area</h1>
<p>This is the data: {{this.config}}</p>
</div>
</template>
<script>
import{getConfig} from "../utils/network";
export default{
data: function () {
return {
config: [{}]
}
},
created:function(){
getConfig();
}
}
</script>
I am using it as they describe in the example i am not really sure what i am missing?
network.jsis missing a call toVue.use(VueResource), as documented for Webpack projects:import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource)And
getConfig()is an arrow function, which permanently binds a lexicalthis(callers cannot rebindthis), andthisisundefinedin the scope ofnetwork.js.If you intended for callers (i.e., the components) to specify itself as the context via
Function.prototype.call, you'd have to declaregetConfigas a regular function:// network.js const getConfig = function() { ... } // option 1 function getConfig() { ... } // option 2 // MyComponent.vue > script import { getConfig } from '../utils/network.js' export default { created() { getConfig.call(this) } }Another solution is to use mixins so that you could call
this.getConfig()(without passing the context):// network.js const getConfig = function() { ... } // option 1 function getConfig() { ... } // option 2 const getConfigMixin = { methods: { getConfig } }; export { getConfigMixin } // MyComponent.vue > script import { getConfigMixin } from '../utils/network.js' export default { mixins: [getConfigMixin], created() { this.getConfig() } }
这篇关于类型错误:无法读取未定义的属性“$http"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
