經常在實際的開發過程中,需要避免將空值傳遞給後臺.比如在實際開發過程中遇到的問題, eg:在進行查詢功能的處理的時候,需要將獲取到的各種查詢條件傳入後臺(vue實際專案) 所以這時候,會對頁面上獲取到的值進行去空的處理

	//對傳入後臺的值進行去空的處理,這裡是自定義的方法
      filter(){
        for(var i in xxxx){
          if( xxxx[i] == ''){
            delete  xxxx[i];
          }
        }
      },

      //請求資料,只是模擬的請求,非真實函式處理
      getList(){
        this.filter();
		//發起ajax請求
        })
      },
 

通過遍歷該資料,當所遍歷到的屬性為空的時候,將此屬性刪除 最近遇到的一個專案,使用者pc端+小程式端+管理員後臺管理系統 問題: 當用戶在pc端進行專案編輯的時候,有一段上傳視訊的編輯處理,後臺會記錄下使用者進行的節點標註,幾分幾秒,但是這裡有一個bug,當用戶沒有進行時間節點的標註處理的時候,那麼會將時間的空值傳入後臺,但此時對應的時間節點的介紹又是存在的. 當前端進行小程式視訊詳情頁面渲染的時候,會有每段視訊的截點標註介紹,但並沒有對應的截點標註時間. 實際的需求:

1. 當有時間節點標註,渲染節點標註介紹,
2. 沒有時間節點標註.不渲染節點介紹 解決問題: 在獲取到頁面傳入的資料之後,遍歷當前渲染的陣列,如果時間都為空,那麼刪除當前遍歷想,否則進行字串的拼接,在發起請求後,傳入該引數給後臺

頁面

     <div class="components-container" style="width:100%;margin-bottom:20px;" v-for="(item, index) in markData" :key="item.index">
         <Button style="float:left;margin-right:55px;width:130px;">{{item.name}}</Button>
         <span style="margin-right:12px;">時間 :</span>
         <InputNumber  v-model="item.min" type="number" :max="999" :min="0" size="large" class="markInput"/>
         <span style="margin:0 10px;">分</span>
         <InputNumber  v-model="item.sec"  type="number" :max="60" :min="0" size="large" class="markInput"/>
         <span style="margin:0 10px;">秒</span>
         <Icon type="md-close" style="font-size:20px;margin-left:20px;cursor:pointer;"  title="刪除" @click="deleteMark(index)"/>
     </div>
 

資料與方法部分

data() {
	return {
	markData:[]
	}
},
upload(){
		//這裡只寫了對資料進行去空部分的處理,其餘部分已經省略
       //標註
      var breakPoint = '';
      var len = this.markData.length;
      for(var i = 0; i < len; i++){
          if(this.markData[i].min == "" && this.markData[i].sec == ""){
             delete this.markData[i]
          }else{
              breakPoint+=this.markData[i].name+':'+this.markData[i].min+':'+this.markData[i].sec+','
          }
          // console.log(breakPoint)
      }
}