vue踩坑系列之“在input 中使用filters 局部过滤器”

vue踩坑系列之“在input 中使用filters 局部过滤器”

​ 最近在项目中遇到需要对Input框中v-model绑定的枚举值进行过滤展示到页面上，万事具备，刷新页面后发现filters并没有起作用，控制台还报错：

[Vue warn]: Property or method "filterTime" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

​ 于是乎，我就重新研究了一下vue.js的过滤器filters，发现filters只能用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

中文官网链接：https://cn.vuejs.org/v2/guide/filters.html

解决方案：使用计算属性

​ 一个小demo

<template>
	<input v-model="filterCardType" placeholder="证件类型" />
</template>

<script>
    export default {
        data() {
			return {
				agent_detail: {
                    agent_detail:1,
                }, 
			};
		},
        computed:{
			"filterCardType"(){
				if(this.agent_detail.cardType==0){
					return "二代身份证"
				}else if(this.agent_detail.cardType==1){
					return "护照"
				}else if(this.agent_detail.cardType==2){
					return "港澳通行证"
				}else if(this.agent_detail.cardType==3){
					return "台湾通行证"
				}else if(this.agent_detail.cardType==4){
					return "香港永久性居民身份证"
				}else if(this.agent_detail.cardType==5){
					return "军官证"
				}
			}
		}
    }
</script>

"登上高峰后，你会发现还有更多的山峰要翻越"