vue重置表單數(shù)據(jù)出現(xiàn)undefined

最近聯(lián)調(diào)出現(xiàn)的一個新問題，條件查詢在前端很常用，基本的模板就是幾個查詢條件，一個查詢按鈕，一個重置按鈕。選擇查詢條件，點擊查詢，會根據(jù)查詢條件，篩選出對應(yīng)的數(shù)據(jù)。重置按鈕就是把所有已選的查詢條件一鍵清空。

因為查詢條件比較多，所以可以直接使用表單提交。

我們在這里選了期數(shù)傳過去，后端根據(jù)傳過去的條件，返回了相應(yīng)的內(nèi)容。

在這里有一個要說的就是，在這個項目里，后端要求每個條件都是必傳的，沒選的就傳空的，所以查詢方法是單獨寫了每個表單的內(nèi)容的。（不寫的話就不會傳了，也要在data里定義默認(rèn)每個數(shù)據(jù)為空字符串）

form: {
  dateRange: ['', ''],
  startTime: '',
  endTime: '',
  qishu: '',
  content: ''
},

doSearch () {
  this.axios.post(this.changeAllurl, {
    startTime: this.dateRange[0],
    endTime: this.dateRange[1],
    pici: this.form.qishu,
    content: this.form.content,
    page: this.page,
    limit: 10
    }).then(res => {
      if (res.result === '00000') {
        this.tableData = res.data.list
        this.total = res.data.total
      } else {
        this.$Message.error(res.data.information)
      }
    })
  },

此時我們點擊重置，條件查詢表單里的內(nèi)容應(yīng)該全部重新變?yōu)榭罩怠?/p>

// 重置表單
formReset () {
  console.log(this.form)
  this.dateRange = ['',''],
  this.form = {
    qishu: '',
    content: '',
  }
  console.log(this.form)
},

變?yōu)榭罩抵?，我們再重新進(jìn)行條件查詢。

在這里出現(xiàn)了一個問題，我們上文說過，他應(yīng)該把所有的數(shù)據(jù)都傳過去，沒有數(shù)據(jù)的，也要傳空字符串，但我們發(fā)現(xiàn)，在這個查詢里，pici沒有傳。（按道理應(yīng)該傳pici: ""）

畢竟一共就按了兩個按鈕，所以我們可以很輕易地想到問題可能出在重置按鈕身上。我們在重置方法最開始打印了一下form，可以看到?jīng)]有任何問題。

 在對form里的數(shù)據(jù)賦值空字串后，我們再次打印form，可以發(fā)現(xiàn)期數(shù)變成了undefined。所以這就是為什么在第二次查詢的時候，pici會丟失。

這里他變成undefined的原因，是因為v-model是雙向綁定的。期數(shù)是一個選擇框，可能01對應(yīng)是，02對應(yīng)否，把期數(shù)變成空字符串后，空字符串沒有對應(yīng)的選項，就會導(dǎo)致期數(shù)變成undefined。

如果我們是一個輸入框，就不會存在undefined的問題了。

找到問題，我們有幾個解決方案

1.讓后端提供空字符串對應(yīng)的選項（這是因為我的選擇框是后端獲取的，如果我們是自己寫的選擇框，前端直接添加就行）

2.判斷，為undefined的時候賦值空字符串

因為我這邊選擇框太多了，所以方法1排除。

方法2的話在查詢的時候使用空值合并運算符pici: this.form.qishu ?? ""

（空值合并運算符，如 a = b ?? c，當(dāng) b 為 null 或者 undefined 時，將 c 的值賦給 a。在 Java 模板 Freemarker 里有相似語法。）

但是我發(fā)現(xiàn)我用這個運算符會報錯，原因是用這個運算符在vue 項目的模板里，默認(rèn)是不可用的。需要引用babel 開發(fā)依賴庫vue-template-babel-compiler。

好麻煩 pass

所以咱們直接用||或運算符哈。

應(yīng)該是沒問題的，這個方法我沒來得及實施，因為后端等不及，后來他直接自己改了代碼，現(xiàn)在不需要每條都傳空值過去了，所以可以接受undefined。

所以我們還有方法3！就是擺爛！說你搞不定！讓后端來搞定！

今天本來打算試一下或運算符的，結(jié)果后端已經(jīng)把服務(wù)關(guān)了，那咱們就之后有時間再測吧。

還有個方法，組件中表單是有對應(yīng)的表單重置的方法的，下次有機(jī)會試一試。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論