解決v-model雙向綁定失效的問題
v-model雙向綁定失效問題
問題描述
InputNumber組件v-model綁定的值在輸入框中手動刪除，在on-change事件中判斷拿到的值，如果為null，賦值為1，但是該值發(fā)生了變化，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)
}
},
問題分析
可以發(fā)現(xiàn)on-change事件是在值發(fā)生改變的時候就觸發(fā)的，而不是在輸入框失焦之后觸發(fā)，那我們可以想到在刪除的那一刻觸發(fā)了on-change事件，值變?yōu)閚ull，這個時候又賦值為1，在極短時間內去連續(xù)的進行賦值操作，就可能導致出錯，因為這個值在組件里面可能進行了一系列的動作，一個還沒結束，又來了一個。
所以最好是不要在一個值的改變事件里面再去改變它。
問題解決
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：不監(jiān)聽on-change事件，改成監(jiān)聽on-blur失焦事件，上一個問題確實解決了，但是會有新的問題，就是按上下鍵去改變值大小的時候沒有監(jiān)聽到值得變化，因為沒有觸發(fā)失焦事件，這里也可以使用watch去監(jiān)聽，但是有更好的解決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) { // 只要該值被改變,就會觸發(fā)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接收，再用計算屬性監(jiān)聽他的改變，改變之后再通過input事件傳出（value和input是默認的組件v-model實現(xiàn)的語法糖），這樣就實現(xiàn)了父子組件的數(shù)據雙向綁定（強相關），因為原本父組件通過prop傳入的值在子組件是不允許被改變的。
vue常遇錯誤之v-mode雙向綁定
項目場景
在我們實際開發(fā)的過程中,程序有bug是經常有的事情：
例如：vue 中 v-model的雙向綁定問題
問題描述
例如：寫好的個人信息表單提交頁面,雖說輸入框可以輸出文本,但是瀏覽器調試模式下的console里面會有報錯的提示
示例：
<template>
<view>
<input v-model="abs" />
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
</style>
瀏覽器運行之后,控制臺會報錯
原因分析
- 這個錯誤翻譯過來就是: 區(qū)塊供應商。js:2128[Vue warn]：屬性或方法“abs”未在實例上定義，但在渲染期間被引用。
- 通過初始化屬性，確保此屬性在數(shù)據選項中或對于基于類的組件是被動的。
- 見：https://vuejs.org/v2/guide/reactivity.html#Declaring-反應性質。
- 發(fā)現(xiàn)于 pages/index/index.vue
- 這個錯誤信息已經告訴我們了,屬性或方法 abs未在實例上被定義,也就是說頁面index.vue沒有定義abs這個方法或者屬性,所以會報這個錯誤
vue的v-model是一個雙向綁定的數(shù)據流，何為雙向綁定,顧名思義,就是需要有一個屬性,然后通過v-mode進行數(shù)據綁定,就拿上面的abs來說,abs的值是123,那么被v-model綁定的標簽的值也會變成123,他會隨著abs的值變化而變化。
解決方案
只需在script里面的return里面加一個屬性即可
<script>
export default {
data() {
return {
abs:"" //如有多個屬性需要用 , 隔開
}
},
onLoad() {
},
methods: {
}
}
</script>
再次運行瀏覽器就不會報錯了
tips：在開發(fā)的過程中，一定要打開瀏覽器調試模式，看控制臺有無報錯信息，優(yōu)先解決報紅的錯誤
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
詳解Vue.js之視圖和數(shù)據的雙向綁定(v-model)
本篇文章主要介紹了Vue.js之視圖和數(shù)據的雙向綁定(v-model)，使用v-model指令,使得視圖和數(shù)據實現(xiàn)雙向綁定，有興趣的可以了解一下2017-06-06
這篇文章主要給大家介紹了關于vue3?Table分頁保留選中狀態(tài)的相關資料,vue table組件是一個非常方便的表格組件,它可以幫助我們實現(xiàn)分頁和選中功能,需要的朋友可以參考下2023-08-08
vue-vuex中使用commit提交mutation來修改state的方法詳解
今天小編就為大家分享一篇vue-vuex中使用commit提交mutation來修改state的方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)樹狀表格效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
VuePress在build打包時window?document?is?not?defined問題解決
這篇文章主要為大家介紹了VuePress在build打包時window?document?is?not?defined問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
這篇文章主要為大家詳細介紹了vue+elementUI配置表格的列顯示與隱藏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在日常開發(fā)中,特別是管理端,經常會遇到要實現(xiàn)拖拽排序的效果,下面這篇文章主要給大家介紹了關于Vue實用功能之實現(xiàn)拖拽元素、列表拖拽排序的相關資料,需要的朋友可以參考下2022-10-10
Vue進階之利用transition標簽實現(xiàn)頁面跳轉動畫
這篇文章主要為大家詳細介紹了Vue如何利用transition標簽實現(xiàn)頁面跳轉動畫，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起一下2023-08-08
這篇文章主要介紹了Vue 根據條件判斷van-tab的顯示方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue項目使用axios發(fā)送請求讓ajax請求頭部攜帶cookie的方法
今天小編就為大家分享一篇vue項目使用axios發(fā)送請求讓ajax請求頭部攜帶cookie的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09