解决vue过滤器filters获取不到this对象的问题

⽬录

vue过滤器filters获取不到this对象原理

下⾯举个例⼦Vue filters this指向问题Vue实例中filter不依赖于当前vue实例上下⽂vue过滤器filters获取不到this对象

原理

在data中定义⼀个属性that，把this存储到that中在调⽤filters中的⽅法sum的时候将that传进去即可

下⾯举个例⼦

⽤filters计算data中 a+b 的值

注意：filters中的sum⽅法的第⼀个参数是|左边那个a，第⼆个参数才是括号写的that

Vue filters this指向问题

Vue实例中filter不依赖于当前vue实例上下⽂

所以在filter中⽆法直接访问当前vue实例, 所以可以使⽤computed替代。

可是当遇到需要根据html⽂本改变，v-for的数据等情况⽽改变时,computed的功能就⽆法满⾜我们的需求了。那我们就可以使⽤methods代替

data: {

shopItemType: {}},

methods: {

shopItemType2str(id){

return this.shopItemType[id]; }}

{{shopItemType2str(shopItem.item_type)}}

以上为个⼈经验，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。