vue2 filters拿不到this

在 Vue.js 2.x 版本中，`filters` 是用于在模板中对数据进行计算的便捷功能。当你在 `v-bind:key` 或 `v-if` 等指令后面使用过滤器时，`this` 变量指向的是当前的元素上下文（Element Context），而不是组件实例本身。

如果你尝试在过滤器内部访问 `this`，它确实不会指向组件的 `data` 或者方法，因为过滤器是在渲染阶段执行的，而那时候组件实例可能还没有完全初始化完成，`this` 指向的是 `renderContext` 对象。

如果你确实在过滤器中需要访问组件的方法或属性，你可以考虑将相关的值作为参数传递给过滤器，或者在 filter 函数内部显式地引用这个值。例如：

<template>
  <div v-text="filteredValue"></div>
</template>

<script>
export default {
  data() {
    return {
      valueToFilter: 'Hello, Vue!'
    };
  },
  filters: {
    customFilter(value, context) {
      // 注意这里 context 就是组件实例
      return context.valueToFilter + ' from filter';
    }
  },
  computed: {
    filteredValue() {
      return this.customFilter(this.valueToFilter);
    }
  }
};
</script>

在这个例子中，`customFilter` 接收了两个参数：要处理的数据和组件上下文，这样就可以在过滤器里直接访问到 `valueToFilter` 属性了。