[英]TypeError: Cannot read property '$http' of undefined - VUEJS
I can't access this.$http
in filters:我无法在过滤器中访问
this.$http
:
<v-sheet height="500">
<v-calendar :now="today" :value="today">
<template v-slot:day="{ date }">
<template v-for="event in eventsMap[date]">
<v-menu :key="event.Ref" full-width offset-x>
<template v-slot:activator="{ on }">
<div v-ripple v- v-on="on" >{{event | searchActivity}}</div>
</template>
</v-menu>
</template>
</template>
</v-calendar>
</v-sheet>
Here is my JavaScript code:这是我的 JavaScript 代码:
import Vue from "vue";
Vue.filter("searchActivity", function(val) {
var params = {
ProblemsID: val.ActivityRef
};
this.$http
.post(auth.API_URL + "api/Problems/Activity", params, {
headers: {
Authorization: "Bearer " + auth.getAuthHeader()
}
})
.then(
response => {
this.activityList = response.body;
},
response => {
if (response.Status === true) {
this.text1 = response.body.ResponseMessage;
this.snackbar = true;
} else {
this.text1 = response.statusText;
this.snackbar = true;
}
}
);
this.Obj = this.activityList.ActivityName;
return this.Obj;
});
To quote from the Vue.js docs:引用 Vue.js 文档:
Vue.js allows you to define filters that can be used to apply common text formatting.
Vue.js 允许您定义可用于应用常见文本格式的过滤器。
Vue.js filters do not have access to this
as they are pure functions. Vue.js 过滤器无法访问
this
,因为它们是纯函数。 Meaning you can't use any injections inside filters.这意味着您不能在过滤器内使用任何注入。
Furthermore, filters must be synchronous, meaning you can't do HTTP calls or anything async inside them.此外,过滤器必须是同步的,这意味着您不能在其中进行 HTTP 调用或任何异步调用。
Filters are normally used to format text values like money, numbers, date or other common presentable information.过滤器通常用于格式化文本值,如货币、数字、日期或其他常见的可呈现信息。
To solve your issue, you cannot use computed
either.要解决您的问题,您也不能使用
computed
。 Because they must be synchronous as well, so you are only left with methods
.因为它们也必须是同步的,所以你只剩下
methods
了。 But you also can't just call an asynchronous method in the template, so you should map your data first before displaying them.但是您也不能只在模板中调用异步方法,因此您应该在显示数据之前先 map 您的数据。 You can do the mapping inside
mounted
or created
life-cycle methods.您可以在
mounted
或created
的生命周期方法中进行映射。
EDIT: added example编辑:添加示例
I feel like a lot is going on in your template, I suggest you split the iteration item to a component, let's call it EventDayView
:我觉得您的模板中发生了很多事情,我建议您将迭代项拆分为一个组件,我们称之为
EventDayView
:
<template>
<v-menu :key="event.Ref" full-width offset-x>
<template v-slot:activator="{ on }">
<div v-ripple v-on="on">{{ activityList.ActivityName }}</div>
</template>
</v-menu>
</template>
<script>
export default {
name: 'EventsDayView',
props: {
event: { type: Object, required: true }
},
data: () => ({
activityList: null
}),
methods: {
searchActivity (val) {
// Your search activity API call
}
},
mounted() {
this.searchActivity(this.event).then(response => {
this.activityList = response.body;
});
}
};
</script>
Later on you could use it like this:稍后您可以像这样使用它:
<v-sheet height="500">
<v-calendar :now="today" :value="today">
<template v-slot:day="{ date }">
<template v-for="event in eventsMap[date]">
<EventDayView :key="event.Ref" :event="event" />
</template>
</template>
</v-calendar>
</v-sheet>
You really ought to think about components first than reaching out to smaller stuff like filters
or directives
usually components
are what you need.你真的应该首先考虑组件,而不是接触
filters
或directives
等更小的东西,通常components
是你需要的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.