解決v-model雙向綁定失效的問(wèn)題
v-model雙向綁定失效問(wèn)題
問(wèn)題描述
InputNumber組件v-model綁定的值在輸入框中手動(dòng)刪除,在on-change事件中判斷拿到的值,如果為null,賦值為1,但是該值發(fā)生了變化,InputNumber卻并沒(méi)有顯示綁定的值(或者說(shuō)有時(shí)候顯示,有時(shí)候又不顯示)
<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('這里有默認(rèn)值哦~可以自行修改哦o(* ̄▽ ̄*)ブ') this.judgeNum = 1 //改變不生效 this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null) } },
問(wèn)題分析
可以發(fā)現(xiàn)on-change事件是在值發(fā)生改變的時(shí)候就觸發(fā)的,而不是在輸入框失焦之后觸發(fā),那我們可以想到在刪除的那一刻觸發(fā)了on-change事件,值變?yōu)閚ull,這個(gè)時(shí)候又賦值為1,在極短時(shí)間內(nèi)去連續(xù)的進(jìn)行賦值操作,就可能導(dǎo)致出錯(cuò),因?yàn)檫@個(gè)值在組件里面可能進(jìn)行了一系列的動(dòng)作,一個(gè)還沒(méi)結(jié)束,又來(lái)了一個(gè)。
所以最好是不要在一個(gè)值的改變事件里面再去改變它。
問(wèn)題解決
setTimeout(() => { this.judgeNum = 1 }, 5000)
解決1:可以弄一個(gè)定時(shí)器,延遲第二次改變,0.5s是比較合適的。但其實(shí)也可能會(huì)受到瀏覽器響應(yīng)速度的影響,所以有了解決2
<InputNumber v-if="judge !== 7" v-model="judgeNum" :value="judgeNum" :min="0" @on-blur="getNum" ></InputNumber> // 注意這里的on-blur沒(méi)有默認(rèn)帶參,所以通過(guò)this.judgeNum去拿到用戶輸入的值
解決2:不監(jiān)聽(tīng)on-change事件,改成監(jiān)聽(tīng)on-blur失焦事件,上一個(gè)問(wèn)題確實(shí)解決了,但是會(huì)有新的問(wèn)題,就是按上下鍵去改變值大小的時(shí)候沒(méi)有監(jiān)聽(tīng)到值得變化,因?yàn)闆](méi)有觸發(fā)失焦事件,這里也可以使用watch去監(jiān)聽(tīng),但是有更好的解決3
<!--父組件:--> <cCompare :init_judge="init_judge" v-model="init_judgeNum" @getData="getJudge" /> <!--通過(guò)v-model去給子組件傳值-->
// 子組件: props: { value: { // 注意value不寫默認(rèn)的返回default,但是類型type還是要寫 type: Number } }, computed: { judgeNum: { get () { return this.value }, set (val) { // 只要該值被改變,就會(huì)觸發(fā)set事件 this.$emit('input', val) // 默認(rèn)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('這里有默認(rèn)值哦~可以自行修改哦o(* ̄▽ ̄*)ブ') this.judgeNum = 1 // this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null) } } }
解決3:對(duì)于這種需要父組件改變子組件v-model值,又需要子組件值改變后同步到父組件,可以直接使用父子組件的雙向綁定,在父組件通過(guò)v-model綁定該值,在子組件中用value接收,再用計(jì)算屬性監(jiān)聽(tīng)他的改變,改變之后再通過(guò)input事件傳出(value和input是默認(rèn)的組件v-model實(shí)現(xiàn)的語(yǔ)法糖),這樣就實(shí)現(xiàn)了父子組件的數(shù)據(jù)雙向綁定(強(qiáng)相關(guān)),因?yàn)樵靖附M件通過(guò)prop傳入的值在子組件是不允許被改變的。
vue常遇錯(cuò)誤之v-mode雙向綁定
項(xiàng)目場(chǎng)景
在我們實(shí)際開(kāi)發(fā)的過(guò)程中,程序有bug是經(jīng)常有的事情:
例如:vue 中 v-model的雙向綁定問(wèn)題
問(wèn)題描述
例如:寫好的個(gè)人信息表單提交頁(yè)面,雖說(shuō)輸入框可以輸出文本,但是瀏覽器調(diào)試模式下的console里面會(huì)有報(bào)錯(cuò)的提示
示例:
<template> <view> <input v-model="abs" /> </view> </template> <script> export default { data() { return { } }, onLoad() { }, methods: { } } </script> <style> </style>
瀏覽器運(yùn)行之后,控制臺(tái)會(huì)報(bào)錯(cuò)
原因分析
- 這個(gè)錯(cuò)誤翻譯過(guò)來(lái)就是: 區(qū)塊供應(yīng)商。js:2128[Vue warn]:屬性或方法“abs”未在實(shí)例上定義,但在渲染期間被引用。
- 通過(guò)初始化屬性,確保此屬性在數(shù)據(jù)選項(xiàng)中或?qū)τ诨陬惖慕M件是被動(dòng)的。
- 見(jiàn):https://vuejs.org/v2/guide/reactivity.html#Declaring-反應(yīng)性質(zhì)。
- 發(fā)現(xiàn)于 pages/index/index.vue
- 這個(gè)錯(cuò)誤信息已經(jīng)告訴我們了,屬性或方法 abs未在實(shí)例上被定義,也就是說(shuō)頁(yè)面index.vue沒(méi)有定義abs這個(gè)方法或者屬性,所以會(huì)報(bào)這個(gè)錯(cuò)誤
vue的v-model
是一個(gè)雙向綁定的數(shù)據(jù)流,何為雙向綁定,顧名思義,就是需要有一個(gè)屬性,然后通過(guò)v-mode
進(jìn)行數(shù)據(jù)綁定,就拿上面的abs來(lái)說(shuō),abs的值是123,那么被v-model
綁定的標(biāo)簽的值也會(huì)變成123,他會(huì)隨著abs的值變化而變化。
解決方案
只需在script里面的return里面加一個(gè)屬性即可
<script> export default { data() { return { abs:"" //如有多個(gè)屬性需要用 , 隔開(kāi) } }, onLoad() { }, methods: { } } </script>
再次運(yùn)行瀏覽器就不會(huì)報(bào)錯(cuò)了
tips:在開(kāi)發(fā)的過(guò)程中,一定要打開(kāi)瀏覽器調(diào)試模式,看控制臺(tái)有無(wú)報(bào)錯(cuò)信息,優(yōu)先解決報(bào)紅的錯(cuò)誤
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
本篇文章主要介紹了Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model),使用v-model指令,使得視圖和數(shù)據(jù)實(shí)現(xiàn)雙向綁定,有興趣的可以了解一下2017-06-06vue3?Table分頁(yè)保留選中狀態(tài)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3?Table分頁(yè)保留選中狀態(tài)的相關(guān)資料,vue table組件是一個(gè)非常方便的表格組件,它可以幫助我們實(shí)現(xiàn)分頁(yè)和選中功能,需要的朋友可以參考下2023-08-08vue-vuex中使用commit提交mutation來(lái)修改state的方法詳解
今天小編就為大家分享一篇vue-vuex中使用commit提交mutation來(lái)修改state的方法詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09VuePress在build打包時(shí)window?document?is?not?defined問(wèn)題解決
這篇文章主要為大家介紹了VuePress在build打包時(shí)window?document?is?not?defined問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07Vue實(shí)用功能之實(shí)現(xiàn)拖拽元素、列表拖拽排序
在日常開(kāi)發(fā)中,特別是管理端,經(jīng)常會(huì)遇到要實(shí)現(xiàn)拖拽排序的效果,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)用功能之實(shí)現(xiàn)拖拽元素、列表拖拽排序的相關(guān)資料,需要的朋友可以參考下2022-10-10Vue進(jìn)階之利用transition標(biāo)簽實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了Vue如何利用transition標(biāo)簽實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)動(dòng)畫,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起一下2023-08-08vue項(xiàng)目使用axios發(fā)送請(qǐng)求讓ajax請(qǐng)求頭部攜帶cookie的方法
今天小編就為大家分享一篇vue項(xiàng)目使用axios發(fā)送請(qǐng)求讓ajax請(qǐng)求頭部攜帶cookie的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09