vue踩坑之在input中使用filters局部過濾器問題
在input中使用filters局部過濾器
? 最近在項(xiàng)目中遇到需要對(duì)Input框中v-model綁定的枚舉值進(jìn)行過濾展示到頁面上，萬事具備，刷新頁面后發(fā)現(xiàn)filters并沒有起作用
控制臺(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的過濾器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)文章
Vue3增加了很多讓人眼前一亮的特征,suspense 組件就是其中之一,對(duì)處理異步請(qǐng)求數(shù)據(jù)非常實(shí)用,下面這篇文章主要給大家介紹了關(guān)于Vue3中如何使用異步請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2022-06-06
Jenkins自動(dòng)化部署Vue項(xiàng)目的方法實(shí)現(xiàn)
本文主要介紹了Jenkins自動(dòng)化部署Vue項(xiàng)目的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vuex提交state&&實(shí)時(shí)監(jiān)聽state數(shù)據(jù)的改變方法
今天小編就為大家分享一篇vuex提交state&&實(shí)時(shí)監(jiān)聽state數(shù)據(jù)的改變方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3實(shí)現(xiàn)跨標(biāo)簽頁通信的四種方式
在Vue應(yīng)用中,跨標(biāo)簽頁的通信通常涉及到兩個(gè)或多個(gè)瀏覽器標(biāo)簽頁之間的信息共享,由于每個(gè)標(biāo)簽頁或窗口都是獨(dú)立的JavaScript執(zhí)行環(huán)境,它們不能直接通過Vue或其他JavaScript庫來直接相互通信,但是,有一些方法可以實(shí)現(xiàn)這種跨標(biāo)簽頁的通信,以下是一些常用的跨標(biāo)簽頁通信方法2025-03-03
vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤問題的解決
這篇文章主要介紹了vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤問題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue簡(jiǎn)易記事本的開發(fā)過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
Vue中關(guān)于異步請(qǐng)求數(shù)據(jù)未更新的解決
本文將探討Vue中異步請(qǐng)求數(shù)據(jù)未更新的常見原因,并提供解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了Vue?列表過濾與排序的實(shí)現(xiàn)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了阿望教你用vue寫掃雷小游戲，本文通過實(shí)例代碼效果圖展示的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Vue是一套用于構(gòu)建前后端分離的框架。剛開始是由國(guó)內(nèi)優(yōu)秀選手尤雨溪開發(fā)出來的，目前是全球“最”流行的前端框架。使用vue開發(fā)網(wǎng)頁很簡(jiǎn)單，并且技術(shù)生態(tài)環(huán)境完善，社區(qū)活躍，是前后端找工作必備技能！下面來看看其得安裝及使用方法吧2021-10-10