快捷導(dǎo)航

vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決

更新時(shí)間：2022年09月09日 09:46:09 作者：芝士焗紅薯

這篇文章主要介紹了vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

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

因?yàn)椴樵儣l件比較多，所以可以直接使用表單提交。

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

在這里有一個(gè)要說的就是，在這個(gè)項(xiàng)目里，后端要求每個(gè)條件都是必傳的，沒選的就傳空的，所以查詢方法是單獨(dú)寫了每個(gè)表單的內(nèi)容的。（不寫的話就不會傳了，也要在data里定義默認(rèn)每個(gè)數(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)
      }
    })
  },

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

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

變?yōu)榭罩抵螅覀冊僦匦逻M(jìn)行條件查詢。

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

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

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

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

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