vue过滤器this指向问题

在Vue的过滤器中，this指向的是Vue实例对象，而不是被过滤的数据对象。

例如，在下面的例子中，当在模板中使用过滤器时，过滤器函数中的this指向的是Vue实例对象：

<template>
  <div>{{ text | toUpperCase }}</div>
</template>

<script>
export default {
  data() {
    return {
      text: 'hello world'
    }
  },
  filters: {
    toUpperCase(value) {
      console.log(this) // Vue实例对象
      return value.toUpperCase()
    }
  }
}
</script>

如果想要在过滤器函数中访问到被过滤的数据对象，可以将它作为第一个参数传入过滤器函数中：

<template>
  <div>{{ text | toUpperCase }}</div>
</template>

<script>
export default {
  data() {
    return {
      text: 'hello world'
    }
  },
  filters: {
    toUpperCase(value, data) {
      console.log(data) // 'hello world'
      return value.toUpperCase()
    }
  }
}
</script>