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

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

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

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

在這里有一個(gè)要說的就是，在這個(gè)項(xiàng)目里，后端要求每個(gè)條件都是必傳的，沒選的就傳空的，所以查詢方法是單獨(dú)寫了每個(gè)表單的內(nèi)容的。（不寫的話就不會(huì)傳了，也要在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)榭罩抵?，我們再重新進(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會(huì)丟失。

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

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

找到問題，我們有幾個(gè)解決方案

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

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

因?yàn)槲疫@邊選擇框太多了，所以方法1排除。

方法2的話在查詢的時(shí)候使用空值合并運(yùn)算符pici: this.form.qishu ?? ""

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

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

好麻煩 pass

所以咱們直接用||或運(yùn)算符哈。

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

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

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

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

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

最新評論