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

目录
  • vue局部过滤器获取不到this
  • vuefilters为什么获取不到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;
    }
},

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

赞 (0)

相关推荐

  • Vue的全局过滤器和私有过滤器的实现

    Vue允许自定义过滤器 可被用作一些常见的文本格式化 过滤器可以用在两个地方:mustache插值表达式 和 v-bind表达式 过滤器应被添加在JavaScript表达式的尾部 由"管道"符指示(管道符就是一个竖杠:|) 一.全局过滤器 全局过滤器调用时的基本格式: 通过管道符[|]来进行过滤 例如{{name | nameOpe}} 定义过滤器的语法:Vue.filter("过滤器名称",处理函数) 处理函数的第一个参数已被固定了 是data 即管道符前面传递的

  • vue-cli 3 全局过滤器的实例代码详解

    在vue1.x版本里是自带里几个基础的过滤器的(虽然不怎么用到). 到了vue2.x版本之后,内置到几个过滤器就被删掉了,如果需要用到过滤器,就要开发者自己去定义. 可以把过滤器定义在某个组件内部,但这样就成了局部过滤器,在别的组件里是无法使用的.所以通常不会这么做. 也可以把过滤器写在main.js里.但如果项目中存在多个过滤器,这会使main.js文件看上去很庞大,不便于后期维护. 所以通常会新建一个js文件,专门用来存放所有过滤器.最后再引到main.js中供全局使用. 1.创建 filt

  • vue中的局部过滤器和全局过滤器代码实操

    vue中的局部过滤器和全局过滤器代码实操

    v-model:绑定的value v-bind:绑定的type <html>   <head>       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   </head>   <body>     <div id="app">       <p>{{ msg }}</p&g

  • vue全局过滤器概念及注意事项和基本使用方法

    vue全局过滤器概念及注意事项和基本使用方法

    目录 一.过滤器的概念 1.自定义一个全局过滤器的格式 二.过滤器的调用方法 三.过滤器的注意事项 四.基本使用方法 一.过滤器的概念 Vue.js允许你自定义过滤器,可被用作一些常见的文本格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式 1.自定义一个全局过滤器的格式 Vue.filter('过滤器将来被调用时候的名称',过滤器的处理函数) 二.过滤器的调用方法 <!-- 在调用过滤器是时候,需要使用 | 来调用, | 叫做管道符 --> <td>{

  • Vue封装全局过滤器Filters的步骤

    (PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project) 在前后端分离的项目中,经常会有后台返回的数据需要经过处理才能显示到页面上的场景. 使用最多的场景就是日期/时间.数字.字符串的格式化处理,实际业务中可能还有更复杂的数据处理逻辑. 下面就拿封装全局的处理数字和字符串的 filter 来展示 vue 如何 封装全局filter 并统一处理. 一.定义/封装过滤器 在 src目录 下新建 filters目录 用来专门存放全局过滤器,如果项

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

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

    目录 vue局部过滤器获取不到this vuefilters为什么获取不到this 问题 原因 解决方法 vue 局部过滤器获取不到this data里面加个字段赋值this. <el-table-column property="sendLab" label="项目流向" width="*"> <template slot-scope="scope"> <span> {{ scope.ro

  • 利用SpringMVC过滤器解决vue跨域请求的问题

    之前写过通过注释的方法解决跨域请求的方法,需要每次都在controll类使用注解,这次通过springmvc的拦截器解决: 继承SpringMVC的类HandlerInterceptor重写preHandle方法,这个方法会在到达 controll之前调用,如下 public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

  • 解决vue组件props传值对象获取不到的问题

    先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1.home.vue(父组件)--personal是被传的参数 <!--子组件--> <form-picker class="form-picker" :personal="personal" > </form-picker> export default

  • 解决Vue axios post请求,后台获取不到数据的问题方法

    最近做项目,需要用到vue,后台是php,第一次使用axios进行请求,本以为同ajax一样,会很简单,但是结果往往不让人满意啊,get请求很简单,这里就不说了,主要说下 post请求方式. 使用axios进行post请求,后台居然接收不到数据,这就纳闷了,于是网上一顿搜索,现在将所用的解决办法给大家说下: 1.new URLSearchParams方式 起初使用params.append("属性名":属性值)的方式,对于简单的数据传递这样是没有问题的,后台可以正常接收数据,但我发现一

  • 解决vue项目获取dom元素宽高总是不准确问题

    dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确: this.$refs.editor[0].offsetHeight; 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕: 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识:vue 获取 指定元素的高度宽度等(

  • 详解Vue串联过滤器的使用场景

    平时开发中,需要用到过滤器的地方有很多,比如单位转换.数字打点.文本格式化等,比如: Vue.filter('toThousandFilter', function (value) { if (!value) return '' value = value.toString() return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,') }) 实现效果: 30000

  • web前端vue filter 过滤器

    vue的过滤器通常用在一些常见的文本格式化,过滤器可以用在两个地方:双花括号插值和 v-bind 表达式. 比如给价格自动加上中文的钱的字符"￥"或者是给一个时间段或(时间戳)相互之间的转换过滤. 在javascript和jquery的年代!时间段的显示或者是提交,都是要在显示的时候要转换下或者提交的时候转换下,这样就有点繁琐了(个人用了vue后的感觉繁琐了). 不多说直接看例子如下: filter定义的过滤器可以局部,可以全局的下面就直接说全局的 老样子还是等先注册一个全局的过滤器关

  • 在Vue组件中获取全局的点击事件方法

    使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"

  • vue通过过滤器实现数据格式化

    一.本节说明 在使用插值表达式的时候,我们通常会有一种需求,就是将数据进行二次的格式化.VUE的过滤器的实现参考了linux的shell命令的管道的实现原理:即上一个命令的输出,是下一个命令的输入. 所以过滤器可以串接使用:{{数据 | 过滤器A | 过滤器B}} 除了在插值表达式中可以使用过滤器,在后文中将要学习到的v-bind指令中也可以使用过滤器.用法是一致的,到时候我们再看一看. 二. 怎么做 全局过滤器(定义一个用于做日期格式化的过滤器) 过滤器的第一个参数是固定的,就是输入的数据.对

随机推荐