vue前端傳空值、空字符串的問題及解決
vue前端傳空值及空字符串問題
在與后端調(diào)試接口時(shí)，經(jīng)常接口里的參數(shù)會(huì)有空值，如果每次都要后端寫判斷，代碼容易冗余。
所以就在前端做判斷，在傳值時(shí)先判斷接口參數(shù)是否為空，為空則不傳，有值則傳參。
這里的例子是vue 列表接口獲取全部列表值
一般列表頁(yè)面都做了搜索和分頁(yè)功能，所以帶的參數(shù)就有：搜索字段、當(dāng)前頁(yè)碼、頁(yè)碼最大數(shù)值（param,pageNo,pageSize）只是舉例，不一定是一模一樣
在加載列表接口時(shí)，這些條件會(huì)拼接到接口url中，所以要對(duì)搜索字段進(jìn)行判斷，是否有值
1.先定義param，當(dāng)做接口參數(shù)，里面存放搜索字段和分頁(yè)字段
2.對(duì)搜索字段進(jìn)行判空操作，如果有值，則存入param，加載時(shí)會(huì)拼接到接口url中
（哪個(gè)字段有值拼哪個(gè)）
列表接口如下
export function getTbComponentList(params) {
return request.get('/compmgr/components', {params})
}效果如下 ：
vue空值報(bào)錯(cuò)問題
如上圖所示，提示percent為空，web效果圖如下
如果是自測(cè)階段不想麻煩就直接在數(shù)據(jù)庫(kù)添加數(shù)據(jù)就行或者或者初始化方法賦初始值，最簡(jiǎn)便的還是在vue template里進(jìn)行判斷
代碼如下：
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解Element-UI中上傳的文件前端處理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue如何重置data的所有屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
一文詳細(xì)聊聊vue3的defineProps、defineEmits和defineExpose
vue3官方文檔defineProps和defineEmits都是只能在scriptsetup中使用的編譯器宏,下面這篇文章主要給大家介紹了關(guān)于vue3的defineProps、defineEmits和defineExpose的相關(guān)資料,需要的朋友可以參考下2023-02-02
vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定，幫大家解析神秘的Object.defineProperty方法2017-03-03
vue2使用el-date-picker實(shí)現(xiàn)動(dòng)態(tài)日期范圍demo
這篇文章主要為大家介紹了vue2使用el-date-picker實(shí)現(xiàn)動(dòng)態(tài)日期范圍示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue請(qǐng)求后端接口導(dǎo)出excel表格方式
這篇文章主要介紹了Vue請(qǐng)求后端接口導(dǎo)出excel表格方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了vue 開發(fā)一個(gè)按鈕組件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-03-03
下面小編就為大家分享一篇vue中v-for加載本地靜態(tài)圖片方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-03-03
編譯優(yōu)化指的是編譯器將模板編譯為渲染函數(shù)的過程中，盡可能多的提取關(guān)鍵信息，并以此指導(dǎo)生成最優(yōu)代碼的過程，優(yōu)化的方向主要是區(qū)分動(dòng)態(tài)內(nèi)容和靜態(tài)內(nèi)容，并針對(duì)不同的內(nèi)容采用不同的優(yōu)化策略2023-01-01
Vue.js通過簡(jiǎn)潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復(fù)雜的生態(tài)中，Vue.js有幸受到一定程度的關(guān)注，所以本文將從各方面對(duì)Vue.js的組件開發(fā)做一個(gè)深入介紹。有需要的朋友們可以參考借鑒。2016-10-10