最近在做管理后臺系統(tǒng)不經(jīng)意間發(fā)現(xiàn)了一可能百分之80的人都容易犯的一個錯誤，如下圖

image.png

是一個用vue開發(fā)的標(biāo)準的后臺管理系統(tǒng)。
我們上圖的輸入框一般會使用vue的雙向綁定，這樣就會導(dǎo)致一個問題就是我們即使不點擊查詢僅僅是填寫內(nèi)容和選擇下拉框，去點擊下一頁請求數(shù)據(jù)也會帶著我們填寫的查詢字段的內(nèi)容執(zhí)行查詢，因為我們的雙向綁定在我們修改的時候已經(jīng)去將搜索的數(shù)據(jù)源改變，導(dǎo)致出現(xiàn)查詢問題！
建議在點擊查詢的時候?qū)㈦p向綁定的數(shù)據(jù)進行重新copy一份使用copy數(shù)據(jù)進行l(wèi)ist查詢參數(shù)，并且查詢時重新賦值頁碼字段或者使用watch監(jiān)聽頁碼重新賦值

//如下例子listQuery是查詢綁定字段
listQuery: {
        pageNum: 1,
        pageSize: 10,
        test1:'',
        test2:''
      }
//在點擊查詢按鈕需要進行copy  這里的exportData是我的導(dǎo)出參數(shù)和列表請求參數(shù)只有在點擊查詢才會賦值
handleFilter() {
      this.listQuery.pageNum = 1
      this.exportData = this.$common.deepCopy(this.listQuery)
      this.getList()
    },
//注意這樣頁碼分頁會失效 建議在請求列表之前頁碼重新賦值或者使用watch監(jiān)聽

watch: {
    'listQuery.pageNum': {
      handler(n, o) {
        this.exportData.pageNum = n
      },
      deep: true
    }, 'listQuery.pageSize': {
      handler(n, o) {
        this.exportData.pageSize = n
      },
      deep: true
    }
  },