解决vue 局部过滤器获取不到this的问题

更新时间：2022年01月24日 09:46:17 作者：狗狗狗狗亮

这篇文章主要介绍了解决vue 局部过滤器获取不到this的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue 局部过滤器获取不到this

data里面加个字段赋值this。

在这里插入图片描述

<el-table-column property="sendLab" label="项目流向" width="*">
  <template slot-scope="scope">
    <span>
      {{ scope.row.sendLab | formataLab(that) }}
    </span>
  </template>
</el-table-column>

这里用的element table ，在过滤器里传入参数，that。

在这里插入图片描述

就可以获取到data里的变量了。

vue filters为什么获取不到this

问题

<div>{{auditResult | auditResultNameFilter}}</div>

data() {
  return {
      auditResultOptions: [...]
  }  
},
filters: {
    auditResultNameFilter(status) {
      let [obj] = this.auditResultOptions.filter(item => item.value === status);
      return obj.name;
    }
},

上面会出现报错

原因

关于这个问题尤大有讲

【this undefined in filters #5998】https://github.com/vuejs/vue/issues/5998

在这里插入图片描述

解决方法

我们可以用下面这种写法、或者用计算属性跟方法都行，比如下面这种

<div>{{auditResult | auditResultNameFilter(auditResultOptions)}}</div>

filters: {
    auditResultNameFilter(status, auditResultOptions) {
      let [obj] = auditResultOptions.filter(item => item.value === status);
      return obj.name;
    }
},

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

多个vue子路由文件自动化合并的方法
这篇文章主要给大家介绍了关于多个vue子路由文件自动化合并的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-09-09
vue项目搭建以及全家桶的使用详细教程(小结)
这篇文章主要介绍了vue项目搭建以及全家桶的使用详细教程(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
vueCli4如何配置vue.config.js文件
这篇文章主要介绍了vueCli4如何配置vue.config.js文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue语法和标签的入门使用教程
Vue是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue语法和标签使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
vue.js实现点击后动态添加class及删除同级class的实现代码
这篇文章主要介绍了vue.js实现点击后动态添加class及删除同级class的相关资料,需要的朋友可以参考下
2018-04-04
Vue路由组件通过props配置传参的实现
本文主要介绍了Vue路由组件通过props配置传参的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
vue实现表单单独移除一个字段验证
这篇文章主要为大家详细介绍了vue实现表单单独移除一个字段验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
element中el-cascader级联选择器只有最后一级可以多选
本文主要介绍了element中el-cascader级联选择器只有最后一级可以多选，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2024-01-01
Vue循环遍历选项赋值到对应控件的实现方法
这篇文章主要介绍了Vue-循环遍历选项赋值到对应控件的实现方法啊，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-06-06
Vue中进行分布式鉴权与认证的过程
在Vue应用中，我们通常需要实现分布式鉴权和认证，以确保用户的安全性和数据的保密性，本文将介绍在Vue中如何进行分布式鉴权与认证,需要的朋友可以参考下
2023-06-06