Vue自定义过滤器无法获取自定义参数，请求排查代码问题

首先咱们来排查你的代码为什么没弹出alert，主要有几个可能的原因：

1. 你可能使用了Vue 3版本 #

Vue 3已经完全移除了过滤器功能，不管你怎么定义过滤器，模板里都不会执行它，自然alert就不会触发。如果是这种情况，你需要用其他方式替代过滤器：

替代方案：用方法实现 #

把过滤器改成Vue实例里的方法，模板里直接调用：

var vm = new Vue({
  el: '#app',
  data: {
    a: 9
  },
  methods: {
    toDou(item, a, b) {
      alert(a + ',' + b);
      return item < 10 ? '0' + item : '' + item;
    }
  }
})

模板改成：

<div id="app">
  {{ toDou(a, 1, 2) }}
</div>

2. DOM加载顺序有问题 #

如果你的JavaScript代码放在<head>标签里，而<div id="app">在<body>里，那执行Vue实例创建代码时，浏览器还没加载到#app元素，Vue没法挂载到这个节点上，模板不会被编译，过滤器自然也不会执行。

解决方法：调整代码位置 #

把你的JS代码移到<body>标签的最末尾，确保DOM加载完成后再初始化Vue：

<div id="app">
  {{a | toDou 1 2}}
</div>
<!-- 先引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 再写你的代码 -->
<script>
Vue.filter('toDou',(item,a,b)=>{ 
  alert(a+','+b); 
  return item<10 ? '0' +item : '' +item; 
}) 
var vm = new Vue({ 
  el:'#app', 
  data:{ 
    a:9 
  }, 
})
</script>

3. 语法细节问题 #

检查你实际代码里的箭头函数写法，是不是写成了HTML转义的=>（你提问里的代码显示的是这个，但实际写代码时应该用=>），如果是转义字符的话，代码会报错，过滤器也无法执行。

验证可用的Vue 2示例代码 #

如果你用的是Vue 2，下面这段代码是可以正常弹出alert并显示09的：

<!DOCTYPE html>
<html>
<head>
  <title>Vue Filter Test</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{a | toDou 1 2}}
  </div>
  <script>
    Vue.filter('toDou', (item, a, b) => {
      alert(a + ',' + b);
      return item < 10 ? '0' + item : '' + item;
    })
    var vm = new Vue({
      el: '#app',
      data: {
        a: 9
      }
    })
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Sylvia