Vue中input被賦值后,無法再修改編輯的問題及解決

更新時(shí)間：2022年04月24日 10:18:13 作者：K.P

這篇文章主要介紹了Vue中input被賦值后,無法再修改編輯的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

input被賦值后,無法再修改編輯

我們直入主題

上面是我司的業(yè)務(wù)邏輯圖，使用elementui框架，如圖，請(qǐng)求數(shù)據(jù)賦值后，不僅有檢測(cè)報(bào)錯(cuò)信息，而且還有無法修改編輯的問題。

起初以為是我的設(shè)置的對(duì)象問題，困擾我許久。

后來，翻閱了大佬的文章才了解。

 <el-form ref="formInline" :inline="true" :rules="rules" :model="formInline" label-position="right" size="medium">
	<el-form-item label="SIM卡號(hào)" prop="icsim">
        <el-input v-model.number="formInline.icsim" maxlength="18" />
    </el-form-item>
    <el-form-item label="ICCID碼" prop="iccid">
        <el-input v-model="formInline.iccid" />
    </el-form-item>
    <el-form-item label="激活時(shí)間" prop="start">
        <el-date-picker v-model="formInline.start" value-format="yyyy-MM-dd HH:mm:ss" style="width:200px" placeholder="選擇日期"/>
    </el-form-item>
    <el-form-item label="服務(wù)到期時(shí)間" prop="end">
        <el-date-picker v-model="formInline.end" value-format="yyyy-MM-dd HH:mm:ss" style="width:200px" placeholder="選擇日期"/>
    </el-form-item>
</el-form>

export default {
  name: 'formInline',
  data () {
    return {
      formInline: {}
    }
  },
  methods: {
    // vue 請(qǐng)求數(shù)據(jù)
	async getSimData(params) {
      const res = await simInfoByVid(params)
      const { sid, iccid, start, end, storage, icsim, vid } = res.data
      this.formInline.sid = sid
      this.formInline.iccid = iccid
      this.formInline.start = start
      this.formInline.end = end
      this.formInline.storage = storage
      this.formInline.icsim = icsim
      this.formInline.vid = vid
    }
  }
}

上面的代碼是我第一次寫的代碼，使用上面的方法，導(dǎo)致input框或者日期選擇框無法再編輯。

根據(jù)官方文檔定義：如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上，它不會(huì)觸發(fā)視圖更新

根據(jù)大佬的文章，總結(jié)了兩個(gè)辦法：

方法一

由此Vue實(shí)例創(chuàng)建時(shí)，formInline的屬性名并未聲明，因此Vue就無法對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程，導(dǎo)致formInline屬性不是響應(yīng)式的，因此無法觸發(fā)視圖更新。

解決的方式有兩種，第一種就是顯示的聲明formInline這個(gè)對(duì)象的屬性，如：

data () {
    return {
      formInline: {
      	sid: '',
      	iccid: '', 
      	start: '', 
      	end: '', 
      	storage: '', 
      	icsim: '', 
      	vid: ''
		}
    }

方法二

使用Vue的全局API: $set()賦值：

async getSimData(params) {
      const res = await simInfoByVid(params)
      const { sid, iccid, start, end, storage, icsim, vid } = res.data
      this.$set(this.formInline, 'sid', sid)
      this.$set(this.formInline, 'iccid', iccid)
      this.$set(this.formInline, 'start', start)
      this.$set(this.formInline, 'end', end)
      this.$set(this.formInline, 'storage', storage)
      this.$set(this.formInline, 'icsim', icsim)
    }

vue綜合問題歸納input框賦值后不能進(jìn)行編輯

項(xiàng)目場(chǎng)景

項(xiàng)目場(chǎng)景：前端實(shí)現(xiàn)查看編輯功能的時(shí)候會(huì)出現(xiàn)， input框賦值后input框不能進(jìn)行編輯,編輯之后自動(dòng)取消，驗(yàn)證無法進(jìn)行取消

問題描述

數(shù)據(jù)代碼：

<el-textarea
                  v-model="drawerForm.msg"
                  placeholder="請(qǐng)輸入功能描述"
                  :rows="3"
                  allowClear
                ></el-textarea>

js：

export default {
? name: 'drawerForm',
? data () {
? ? return {
? ? ? drawerForm: {}
? ? }
? },
? methods: {
? ? handleEditHelloForm () {
? ? ? ? // 模擬編輯功能需要數(shù)據(jù)回顯
? ? ? ? this.helloForm.msg = 'hello 我是drawerForm中的msg值'
? ? }
? }
}

原因分析

空input框進(jìn)行賦值后,不存在setter和getter方法,導(dǎo)致無法實(shí)現(xiàn)雙向綁定
由此Vue實(shí)例創(chuàng)建時(shí)，drawerForm.屬性名并未聲明，因此Vue就無法對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程，導(dǎo)致drawerForm屬性不是響應(yīng)式的，因此無法觸發(fā)視圖更新。

解決方案

第一種就是顯示的聲明drawerForm這個(gè)對(duì)象的屬性，如：

  data () {
    return {
      drawerForm: {
         msg：""
      }
    }
  },

使用vue的全局方法: this.$set(data, property, value)

data為要修改的對(duì)象，property為要添加的屬性，value就是這個(gè)屬性的值? ? handleEditHelloForm () {
? ? ? ? // 模擬編輯功能需要數(shù)據(jù)回顯
? ? ? ? Vue.set(this.helloForm,'msg', 'hello 我是drawerForm中的msg')
? ? }

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

您可能感興趣的文章: