Vue2x项目中在filters中正确使用data中数据的姿势？

Question

问题描述

很多情况下我们会使用 filter 来做 key-label 的转换操作，但是很多场景下我们的 key-label 数据字典是从后端请求回来的。就不能直接使用在 data 中声明好的字典变量。

问题出现的环境背景及自己尝试过哪些方法

一般解决这样的问题，我们都会在 export default 外部定义一个变量并在 created 生命周期中赋值为 this ，使其指向当前 Vue 组件实例。但总是觉得并不优雅，所以如何正确的在 filters 中使用 data 中的数据呢？

相关代码

<template>
  <div>{{ roleKey | transfDictValue }}</div>
</template>
<script>
let _this = null
export default { 
  filters: {
    transfDictValue(value) {
      const findDict = _this.statusDatas.find(item => item.value === value)
      return findDict ? findDict.name : '--'
    }
  },
  data(){
    return {
      // 以下为异步数据，仅为举例，并不是固定值
      roleKey: 1,
      dictList: [
        { value: 1, name: '角色A' },
        { value: 2, name: '角色B' }
       ]
    }
  },
  created() {
    _this = this;
  },
}
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

如何更加优雅的在 filter 中使用 data 当中声明的数据。

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

transfDictValue里面把dictlist传过去

<template>
  <div>{{ roleKey | transfDictValue(dictlist)） }}</div>
</template>

 filters: {
    transfDictValue(value,dictlist) {
      const findDict = dictlist.find(item => item.value === value)
      return findDict ? findDict.name : '--'
    }
  },

Answer 2

从 vue3 中将其移除可见这种情况下也不一定要使用 filter ，在异步获取到数据之后就可以直接建立一个 {val: key} 的映射关系，并且不需要其具备响应式，则可以将其使用 freeze 冻结起来。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。