vue 局部过滤器获取不到this解决办法

最新推荐文章于 2024-03-21 17:41:00 发布

狗狗狗狗亮

最新推荐文章于 2024-03-21 17:41:00 发布

阅读量1.9k

点赞数 1

分类专栏： vue 个人笔记

本文链接：https://blog.csdn.net/weixin_44046951/article/details/108850642

版权

个人笔记同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

vue

29 篇文章 1 订阅

订阅专栏

这篇博客介绍了在Element UI的Table组件中，如何通过模板插槽和过滤器来实现从data中获取并处理数据。作者提到，通过在过滤器内传入`that`参数，可以访问到data内的变量，从而实现在表格列中动态显示和格式化数据。

摘要由CSDN通过智能技术生成

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里的变量了。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

狗狗狗狗亮

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue3 - filters 过滤器为什么被移除放弃？取而代之的解决方案又是什么？

王佳斌

11-15

5092

vue3.js官方文档，vue3过滤器怎么实现，vue3过滤器官方文档，vue3中过滤器已移除,且不再支持。取而代之的是，vue3删除过滤器的原因，Vue3不支持Filters过滤器的问题，Vue3不支持Filters过滤器，vue3删除过滤器 vue3删除过滤器的原因，vue3为什么把组件的filters配置删了，VUE2.0过滤器filter(VUE3.0已经取消掉了)，Vue3不支持Filters过滤器的问题，vue3使用不了过滤器怎么办？Vue3 - filters 过滤器为什么被移除放弃？取而代之

vue2中的过滤器

yezi153的博客

10-26

1162

1.过滤器使用场景:一个值需要经过处理后返回另一个结果类似计算属性计算之后返回计算的结果 // 全局过滤器写法 Vue.filter("过滤器名", (值) => {return "返回处理后的值"}) // 局部过滤器 filters: { 过滤器名(值) { return 处理后的结果 } } 2.计算属性使用场景:一个变量的结果需要另外变量计算得来特点:函数内变量变化,会自动计算结果返回,有缓存的特性缓存:依赖项(计算属性的函数里面使用的变量)不变,多次调

1 条评论您还未登录，请先登录后发表或查看评论

Vue3的setup函数中为什么没有this

weixin_47450807的博客

02-11

9471

我们在vue2中使用options api时，可以使用this,但是当我们使用vue3中的composition api时，我们在setup中却无法使用this。原因是：我们在options api中对其中的一些属性进行绑定，但是在composition api中的setup函数的执行并没有绑定实例对象，下面我们看一下源码。上面截图为options api中的methods选项和生命周期函数的部分源码，我们可以看到当执行函数时，会使用bind进行绑定。下面我们将从composition api的se

vue 过滤器 filters 中取不到 this 问题解决

工作中遇到问题记录

11-04

1851

vue 过滤器 filters 中取不到 this 问题解决：定义一个that通过传参的办法取

vue 导航守卫取不到this问题

周家大小姐

10-18

2274

如果直接用this是值不到的;因为beforeRouteEnter是在mounted前执行 beforeRouteEnter(to,from,next){ if(to.path == '/bureau'){ console.log(to.meta.title) next(vm =>{ t...

解决在Vue中this.拿不到跨＜script＞变量的问题

u013993793的博客

11-14

722

情况：使用Element-plus 的时候，按官方例程，若在component mounted()等生命周期情况，无法正确拿到在component以外的变量。此时Vite run dev的情况均无报错，build后产生问题，报错：dialogFormVisible is not define.之后build，最后问题解决。注意：最好不要将setup单独写一个script标签里。解决方法：将最上方script标签中的内容写进component。

vue中过滤器filters获取不到this的问题以及解决方法

qq_40685439的博客

06-28

6187

在vue中，如果要过滤的数据是依赖this上下文的话，是会报错的，因为this的指向是undefined，而不是vue实例；打印结果：原因：这句话的大概意思是，vue中的过滤器更偏向于对文本数据的转化，而不能依赖this上下文，如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法。 解决办法1：在data中定义一个that=this，在需要过滤的过滤器中传入that参数，然后在过滤器中使用结果：可以拿到firstTime的值 解决办法2：改用compu

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

10-15

Vue的过滤器分为两种：全局过滤器和局部过滤器。 - 全局过滤器使用`Vue.filter`方法定义，可以在Vue的任何组件内使用。 - 局部过滤器则是在组件内部通过`filters`选项定义。 过滤器可以串联使用，这允许开发者在一...

vue.js 过滤器使用及原理分享讨论

01-20

2. **局部过滤器**：局部过滤器只在其所在组件的范围内可用，定义在组件的 `filters` 选项内： ```javascript export default { data() { return { // ... } }, filters: { filterFormat: function (value)...

Vue 使用三种方式写过滤器

weixin_52915467的博客

12-13

874

「喜欢是和优点谈恋爱，那么爱就是和缺点过日子啦」文章目录1.全局过滤器2.计算属性实现3.监测属性实现4.filters 局部过滤器 1.全局过滤器 这里是一个全局过滤器，可以在全局调用，其中参数value可以收取到属性得到的值然后通过slice（0,4）获取前四位，下面讲解分别使用计算属性监测属性 fliters局部过滤器实现。 Vue.filter('mySlice',function(value){ return value.slice(0,4) }) 2.计算属性实

为什么vue3内不使用this

小码哥AI、互联网副业项目

02-22

1596

为什么vue3内不使用this

vue3没有this怎么办?

最新发布

m0_74359467的博客

03-21

890

这是因为组合式 API 的设计哲学就是鼓励函数式编程和更直观的状态管理，而不是依赖于组件实例的上下文。因此，大多数情况下，你不需要在组合式 API 中使用。但是请注意，这种做法并不常见，因为组合式 API 鼓励更直接和函数式的方式来处理状态和方法。在这种情况下，你更应该寻找不需要依赖组件实例的解决方案。对象是一个普通的 JavaScript 对象，它包含了组件实例上的一些属性和方法。但是，如果你确实需要从组件实例中访问某些东西（例如。在 Vue 3 的组合式 API 中，确实没有。在这个例子中，我们通过。

vue如何在过滤器里面使用this

m0_63816143的博客

01-03

1048

如何在过滤器里面使用this

vue3为什么舍弃了this.$set

柠檬人的博客

12-08

3684

因为vue2是用object.definedProperty来实现数据响应的，他无法监听深层数据的变化。所以需要使用this.$set来实现数据的修改和添加。而vue3是通过proxy代理来实现数据的响应，通过ref和reactive将值和对象类型变为响应式对象，所以这样对它的修改和添加就能被vue捕获到，从而实现页面的自动刷新。所以直接对对象本身进行修改或者添加就行了，this.$set自然就没用了。

vue3没有this，如何绑定全局方法

qq_36711388的博客

09-16

3367

vue3没有this，如何绑定全局方法 3. 页面中使用

纯CSS 移动端，根据宽度获取高度

qq_19484091的博客

05-28

591

html部分代码 <div class="goods_div"> <div class="goods_li"> </div> <div class="goods_li"> </div> <div class="goods_li"> </div> </div> CSS部分代码 .goods_div{width:100%;} .goods_li{width:33.33%; paddin

vue3 this问题

2302_76678159的博客

08-05

997

为什么vue3没有this：在vue2中使用options api时，可以使用this,但是当我们使用vue3中的composition api时，我们在setup中却无法使用this。vue3中可以使用getCurrentInstance函数获取this实例。

Vue.js--作用域插槽、访问slot

吴声子夜歌的博客

10-13

957

作用域插槽作用域插槽是一种特殊的slot，使用一个可以复用的模板替换已渲染元素。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...

Vue3速览

changyixiangsi的博客

11-29

372

Vue3与Vue2的区别 vue3基本兼容vue2（兼容性达到了90%），也就是说Vue3基本可以直接写Vue2的内容 Vue3的优点按需引用：不再像Vue2那样直接引用全部导致有些用不上的引用进来造成浪费。Vue3只需要用到那个引用那个就行。组合式api：更加接近原生JavaScript，更加直观，对于一些学习过js却没有学习过vue的人来说也能勉强看懂一些在Vue3中是没有“this”的存在的，更加有效的降低了代码的耦合性。 Vue3的启动方式 vue3启动方式与vue2有所不同，具体如下：

Vue.js过滤器详解：时间格式化应用

除了全局过滤器，Vue组件内部也可以定义局部过滤器，只在该组件内部生效。局部过滤器的定义方式与全局过滤器类似，只是放在组件的`filters`选项内。 ```javascript new Vue({ // ... filters: { capitalize: ...