vue踩坑之在input中使用filters局部過(guò)濾器問(wèn)題
在input中使用filters局部過(guò)濾器
? 最近在項(xiàng)目中遇到需要對(duì)Input框中v-model綁定的枚舉值進(jìn)行過(guò)濾展示到頁(yè)面上，萬(wàn)事具備，刷新頁(yè)面后發(fā)現(xiàn)filters并沒(méi)有起作用
控制臺(tái)還報(bào)錯(cuò)：
[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的過(guò)濾器filters，發(fā)現(xiàn)filters只能用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。
中文官網(wǎng)鏈接：https://cn.vuejs.org/v2/guide/filters.html
解決方案
使用計(jì)算屬性
? 一個(gè)小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 "護(hù)照"
}else if(this.agent_detail.cardType==2){
return "港澳通行證"
}else if(this.agent_detail.cardType==3){
return "臺(tái)灣通行證"
}else if(this.agent_detail.cardType==4){
return "香港永久性居民身份證"
}else if(this.agent_detail.cardType==5){
return "軍官證"
}
}
}
}
</script>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2+tracking實(shí)現(xiàn)PC端的人臉識(shí)別示例
本文主要介紹了vue2+tracking實(shí)現(xiàn)PC端的人臉識(shí)別示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
vue 運(yùn)用mock數(shù)據(jù)的示例代碼
本篇文章主要介紹了vue 運(yùn)用mock數(shù)據(jù)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Vue多層數(shù)據(jù)結(jié)構(gòu)響應(yīng)式失效,視圖更新失敗問(wèn)題
這篇文章主要介紹了Vue多層數(shù)據(jù)結(jié)構(gòu)響應(yīng)式失效,視圖更新失敗問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
springboot+VUE實(shí)現(xiàn)登錄注冊(cè)
這篇文章主要為大家詳細(xì)介紹了springboot+VUE實(shí)現(xiàn)登錄注冊(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
使用vue.js實(shí)現(xiàn)聯(lián)動(dòng)效果的示例代碼
本篇文章主要介紹了使用vue.js實(shí)現(xiàn)聯(lián)動(dòng)效果的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
vue 插值 v-once,v-text, v-html詳解
這篇文章主要介紹了vue 插值 v-once,v-text, v-html詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue實(shí)現(xiàn)鼠標(biāo)移入移出事件代碼實(shí)例
這篇文章主要介紹了vue實(shí)現(xiàn)鼠標(biāo)移入移出事件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
在Vue3中處理異步API調(diào)用并更新表單數(shù)據(jù)的方法示例
這篇文章主要介紹了如何在Vue3中處理異步API調(diào)用并更新表單數(shù)據(jù)（附Demo）,文中通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue-cli3設(shè)置代理無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
???????基于el-table和el-pagination實(shí)現(xiàn)數(shù)據(jù)的分頁(yè)效果
本文主要介紹了???????基于el-table和el-pagination實(shí)現(xiàn)數(shù)據(jù)的分頁(yè)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08