Vue: Using filters local filters in input

Using filters local filters in input

Recently, I encountered an enumeration value bound to v-model in the Input box and displayed it on the page. Everything is available. After refreshing the page, I found that filters did not work.

The console also reported an error:

[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.

So I re-examined the filterfilters, found that filters can only be used in two places:Double braces interpolation andv-bindexpression(The latter is supported starting from 2.1.0+).

Chinese official website link:/v2/guide/

Solution

Use Computing Properties

A small demo:

<template>
	<input v-model="filterCardType" placeholder="Certificate Type" />
</template>

<script>
    export default {
        data() {
			return {
				agent_detail: {
                    agent_detail:1,
                }, 
			};
		},
        computed:{
			"filterCardType"(){
				if(this.agent_detail.cardType==0){
					return "Second Generation ID Card"
				}else if(this.agent_detail.cardType==1){
					return "passport"
				}else if(this.agent_detail.cardType==2){
					return "* and Macau Pass"
				}else if(this.agent_detail.cardType==3){
					return "* Pass"
				}else if(this.agent_detail.cardType==4){
					return "* Permanent Resident Identity Card"
				}else if(this.agent_detail.cardType==5){
					return "Official Certificate"
				}
			}
		}
    }
</script>

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.