在v-if属性中使用过滤器 filter，报错

一、问题描述

导致错误的代码：

   ......
 <template v-if="operateName | filterOperateName">
        <p class="enable_font">
          <i class="el-icon-info enable-icon"></i>
          <span
            >确定要
            <em class="operate_font">{{ operateName }}</em>
            选中数据吗？</span
          >
        </p>
      </template>
    ......
    <script>
export default {
  data() {
    return {
    	operateName:"" // operateName会在其他地方被更改 
    }
  },
  filters: {
    filterOperateName(name) {
      const names = ["启用", "禁用", "删除"];
      return names.includes(name) ? true : false;
    }
  }
}
</script>

报错如下：

Property or method "filterOperateName" is not defined on the instance but referenced during render. Make sure that this property is reactive

二、解决办法

将v-if中的内容改为方法，不直接用vue的filters:

1. 将v-if的内容改为：v-if="filterOperateName(operateName )"

2. 将刚刚的filters中的内容放到methods中即可

   ......
 <template v-if="filterOperateName(operateName )">
        <p class="enable_font">
          <i class="el-icon-info enable-icon"></i>
          <span
            >确定要
            <em class="operate_font">{{ operateName }}</em>
            选中数据吗？</span
          >
        </p>
      </template>
    ......
    <script>
export default {
  data() {
    return {
    	operateName:"" // operateName会在其他地方被更改 
    }
  },
  methods: {
    filterOperateName(name) {
      const names = ["启用", "禁用", "删除"];
      return names.includes(name) ? true : false;
    }
  }
}
</script>

我这是用在弹窗中的，如图：