v-model雙向綁定失效的問題怎么解決

這篇文章主要介紹“v-model雙向綁定失效的問題怎么解決”，在日常操作中，相信很多人在v-model雙向綁定失效的問題怎么解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”v-model雙向綁定失效的問題怎么解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

v-model雙向綁定失效問題

問題描述

InputNumber組件v-model綁定的值在輸入框中手動刪除，在on-change事件中判斷拿到的值，如果為null，賦值為1，但是該值發生了變化，InputNumber卻并沒有顯示綁定的值（或者說有時候顯示，有時候又不顯示）

<InputNumber
      v-if="judge !== 7"
      v-model="judgeNum"
      :value="judgeNum"
      :min="0"
      @on-change="getNum"
    ></InputNumber>

getNum (num) {
      if (typeof num === 'number') {
        this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      } else {
        this.$Message.info('這里有默認值哦~可以自行修改哦o(*￣▽￣*)ブ')
        this.judgeNum = 1 //改變不生效
        this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      }
    },

問題分析

可以發現on-change事件是在值發生改變的時候就觸發的，而不是在輸入框失焦之后觸發，那我們可以想到在刪除的那一刻觸發了on-change事件，值變為null，這個時候又賦值為1，在極短時間內去連續的進行賦值操作，就可能導致出錯，因為這個值在組件里面可能進行了一系列的動作，一個還沒結束，又來了一個。

所以最好是不要在一個值的改變事件里面再去改變它。

問題解決

setTimeout(() => {
    this.judgeNum = 1
}, 5000)

解決1：可以弄一個定時器，延遲第二次改變，0.5s是比較合適的。但其實也可能會受到瀏覽器響應速度的影響，所以有了解決2

<InputNumber
      v-if="judge !== 7"
      v-model="judgeNum"
      :value="judgeNum"
      :min="0"
      @on-blur="getNum"
></InputNumber>
// 注意這里的on-blur沒有默認帶參，所以通過this.judgeNum去拿到用戶輸入的值

解決2：不監聽on-change事件，改成監聽on-blur失焦事件，上一個問題確實解決了，但是會有新的問題，就是按上下鍵去改變值大小的時候沒有監聽到值得變化，因為沒有觸發失焦事件，這里也可以使用watch去監聽，但是有更好的解決3

<!--父組件：-->
<cCompare :init_judge="init_judge" v-model="init_judgeNum" @getData="getJudge" />
<!--通過v-model去給子組件傳值-->

// 子組件：
props: {
    value: { // 注意value不寫默認的返回default，但是類型type還是要寫
      type: Number
    }
},
computed: {
    judgeNum: {
      get () {
        return this.value
      },
      set (val) { // 只要該值被改變,就會觸發set事件
        this.$emit('input', val) // 默認input事件
        this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      }
    }
},
methods: {
	getNum () { // 這里面就不須再去拋新值了，都在set里面拋了
      if (typeof this.judgeNum === 'number') {
        // this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      } else {
        this.$Message.info('這里有默認值哦~可以自行修改哦o(*￣▽￣*)ブ')
        this.judgeNum = 1
        // this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      }
    }
}

解決3：對于這種需要父組件改變子組件v-model值，又需要子組件值改變后同步到父組件，可以直接使用父子組件的雙向綁定，在父組件通過v-model綁定該值，在子組件中用value接收，再用計算屬性監聽他的改變，改變之后再通過input事件傳出（value和input是默認的組件v-model實現的語法糖），這樣就實現了父子組件的數據雙向綁定（強相關），因為原本父組件通過prop傳入的值在子組件是不允許被改變的。

vue常遇錯誤之v-mode雙向綁定

項目場景

在我們實際開發的過程中,程序有bug是經常有的事情：

例如：vue 中 v-model的雙向綁定問題

問題描述

例如：寫好的個人信息表單提交頁面,雖說輸入框可以輸出文本,但是瀏覽器調試模式下的console里面會有報錯的提示

示例：

<template>
	<view>
		<input v-model="abs" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>

</style>

瀏覽器運行之后,控制臺會報錯

原因分析

• 這個錯誤翻譯過來就是: 區塊供應商。js:2128[Vue warn]：屬性或方法“abs”未在實例上定義，但在渲染期間被引用。

• 通過初始化屬性，確保此屬性在數據選項中或對于基于類的組件是被動的。

• 發現于 pages/index/index.vue

• 這個錯誤信息已經告訴我們了,屬性或方法 abs未在實例上被定義,也就是說頁面index.vue沒有定義abs這個方法或者屬性,所以會報這個錯誤

vue的v-model是一個雙向綁定的數據流，何為雙向綁定,顧名思義,就是需要有一個屬性,然后通過v-mode進行數據綁定,就拿上面的abs來說,abs的值是123,那么被v-model綁定的標簽的值也會變成123,他會隨著abs的值變化而變化。

解決方案

只需在script里面的return里面加一個屬性即可

<script>
	export default {
		data() {
			return {
				abs:""  //如有多個屬性需要用 , 隔開
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

再次運行瀏覽器就不會報錯了

tips：在開發的過程中，一定要打開瀏覽器調試模式，看控制臺有無報錯信息，優先解決報紅的錯誤

到此，關于“v-model雙向綁定失效的問題怎么解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！