小程序平台不支持 vue 过滤器,编译时直接忽略;vue 3 已移除该语法,uni-app 仅 h5/app 端兼容;过滤器在小程序中注册无效,v-if 中不可用,错误常源于数据未定义或字段名不统一。

过滤器在小程序平台根本不会执行,别白费劲查转译
uni-app 小程序端(微信/支付宝等)不支持 Vue 的 filters 语法,编译时会直接忽略,不会报错,也不会生效——你看到的“报错”,其实是其他地方出问题了,比如模板里写了 {{ status | statusText }} 却没注册过滤器,或者值为 undefined 导致渲染异常,但错误源头不是“转译失败”,而是逻辑误用。
Vue 3 已移除 filter 语法,uni-app 当前虽兼容 Vue 2 模式,但仅限 H5 和 App 端;所有小程序平台(包括微信、支付宝、百度)在底层运行时均无过滤器注册上下文,Vue.filter() 在小程序中注册了也无效。
- 检查
main.js是否真有Vue.filter('statusText', ...),且执行早于new Vue() - 确认
manifest.json或vue.config.js中vueVersion是'2'(Vue 3 项目连语法都不识别) - 删掉所有
filters: { ... }组件内定义——它只对 H5 有效,小程序下纯属幻觉
模板里写 {{ item.status | statusText }} 却空白或报错?先看数据有没有
最常见假象:以为是过滤器失效,实际是 item 还没加载完,item.status 是 undefined,导致整个表达式求值为 undefined,渲染为空白或触发 Cannot read property 'status' of undefined。
- 不要写
{{ item.status | statusText }},改用{{ (item?.status) | statusText }}(可选链确保安全) - 如果
item来自异步请求,初始化时应设为data() { return { item: {} } },而非null或undefined - 过滤器函数内部必须兜底:
return map[value] || '未知状态',不能假设value一定存在 - 后端返回的数字状态码常被 JSON 解析成字符串,
map的 key 得用字符串('0'而非0)
v-if 里不能用过滤器,写了也白写
v-if 只接受 JavaScript 布尔表达式,{{ }} 和 | 是模板编译层语法,进不了 v-if 的判断逻辑。写成 v-if="{{ item.status | statusText }}" 会直接编译失败,报 Invalid expression;写成 v-if="item.status | statusText" 则因无过滤器上下文返回 undefined,条件恒为 false。
- 判断逻辑必须用原始值:
v-if="item.status === '1'",而不是靠过滤器转义后判断 - 若需复用状态语义,抽成计算属性:
computed: { isPending() { return this.item.status === '1' } } - 绝对不要在
v-if里调用uni.showToast或任何副作用——那是响应式更新该干的事
真正该统一处理的地方:响应拦截 + 错误映射
所谓“API 错误信息过滤”,本质是网络层和业务层错误的分类捕获与提示,跟模板过滤器毫无关系。99% 的人搜“过滤器 错误信息”,其实是被术语带偏了。
- 用
uni.request封装时,在fail回调里判断err.errMsg(如"request:fail timeout"),在success里检查res.statusCode和res.data.code - 若用
axios或uni-app-request,配interceptors.response.use,集中处理401、500、业务码1001等 - 错误文案别硬编码在过滤器里,建个对象:
{ 1001: '登录已过期', 1002: '权限不足' },方便多语言和热更新 - 提取错误消息的工具函数必须防御性足够:
res?.data?.msg || res?.data?.message || res?.msg || '请求失败'
过滤器在小程序里就是个幽灵功能——看着像能用,其实一碰就散。真要解决问题,得扔掉“过滤器”这个思维惯性,回到请求拦截、响应解析、状态管理这条主线上来。最易被忽略的是:不同接口错误字段名不统一,而你写的 res.data.msg 正好撞上某个接口返回的是 res.error。










