随手记:vue2 filters this指向undefined

今天在使用filters的时候,需要用到this的数据,结果发现,this打印出来的是undefined

原因: 过滤器注册在vue实例之前,所以this指向了window,但是因为严格模式原因,为 undefined;

所以需要全局声明this,在filters中才能指向vue

javascript 复制代码
    //表格中插槽使用filters的地方
      <template #joinStatus>
          <el-table-column label="随访状态" align="center">
            <template slot-scope="scope">
              {{ scope.row.joinStatus | joinStatusFilter(that) }}
            </template>
          </el-table-column>
        </template>


    //在data中声明that 指向this
    data() {
        return{
            // 保存this以便filter中使用
            that: this,
        }
    }
      

    filters: {
      joinStatusFilter(value, that) {
        let status = that.statusList.find(item => item.value == value);
        return status? status.label : '';
      }
    },
相关推荐
yangyanping201082 分钟前
Vue入门到精通七之关键字const
前端·javascript·vue.js
姝然_952713 分钟前
Jetpack Compose 绘制流程与自定义布局
前端
lxh011313 分钟前
重复的DNA序列
开发语言·javascript·ecmascript
姝然_952713 分钟前
Jetpack Compose Brush 渐变
前端
阿鑫_99624 分钟前
通用-ESLint+Prettier基础知识
前端·后端
ai超级个体30 分钟前
金三银四,一个面试官连连夸赞的个人网页技术分享
前端·面试·three.js·threejs·网页设计·网页灵感·网页分享
Oneslide31 分钟前
块级元素竖向堆叠且宽度默认会撑满其父容器的可用宽度
前端
i建模35 分钟前
npm使用大全
前端·npm·node.js
李剑一36 分钟前
Cesium 实现园区水景!3 种水面效果,Water 材质 5 分钟搞定
前端·vue.js·cesium
kgduu1 小时前
js之错误处理
开发语言·前端·javascript