Javascript TypeError:无法读取属性'$http'；未定义-VUEJS的定义

我无法在筛选器中访问此。$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>

---

引用Vue.js文档：

Vue.js允许您定义可用于应用通用文本格式的过滤器

Vue.js筛选器无法访问此，因为它们是纯函数。这意味着你不能在过滤器内使用任何注射

此外，过滤器必须是同步的，这意味着您不能在其中执行HTTP调用或任何异步操作

过滤器通常用于格式化文本值，如货币、数字、日期或其他常见的可呈现信息

要解决您的问题，您也不能使用

computed

。因为它们也必须是同步的，所以只剩下

方法

。但是您也不能只在模板中调用异步方法，因此您应该在显示数据之前首先映射数据。您可以在

mounted

或

created

生命周期方法中进行映射

编辑：添加示例

我觉得您的模板中发生了很多事情，我建议您将迭代项拆分为一个组件，我们称之为

EventDayView

：

{{activityList.ActivityName}
导出默认值{
名称：“EventsDayView”，
道具：{
事件：{type:Object，必需：true}
},
数据：（）=>({
activityList:空
}),
方法：{
搜索活动（val）{
//您的搜索活动API调用
}
},
安装的（）{
this.searchActivity（this.event）.then（response=>{
this.activityList=response.body；
});
}
};

以后您可以这样使用它：

---

你真的应该首先考虑组件，而不是接触更小的东西，比如

过滤器

或

指令

通常

组件

是你所需要的。

我认为这个解决方案是正确的，但我是新的vuejs，ı我正在使用一个单页应用程序，所以ı没有使用此解决方案，但感谢您的帮助：）谢谢您帮助我，我理解，您能给我举个例子吗？我为您添加了一个例子，您可能想更改一些内容。

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;
});