Lastor
@Lastor
說
Tue, Nov 14, 2023 3:47 PM
coding
今天跟同事討論限制 input 輸入，自己測一側之後發現，這樣手動雙綁居然不 work，不科學啊??
Lastor
@Lastor
Tue, Nov 14, 2023 3:49 PM
如果改成 v-model 是可以如預期 work 的，在輸入的同時，過濾掉英數字以外的任何字元
l• ܫ•) Davyキュルッ
@david50407
Tue, Nov 14, 2023 3:49 PM
nextTick?
Lastor
@Lastor
Tue, Nov 14, 2023 3:50 PM
但改成單綁 value，用 event target 去給值，會發現 input UI 顯示會慢一拍，要輸入第二個字元之後，replace 效果才會生效
Lastor
@Lastor
Tue, Nov 14, 2023 3:51 PM
去 watch 看 text 會發現更新比輸入慢一拍
Lastor
@Lastor
Tue, Nov 14, 2023 3:51 PM
但如果把 replace 拿掉，不做處理，那手動雙綁就會同步
Lastor
@Lastor
Tue, Nov 14, 2023 3:51 PM
l• ܫ•) Davyキュルッ
: 我剛有 try 過，一樣
Lastor
@Lastor
Tue, Nov 14, 2023 3:52 PM
就很好奇 Why!?
Lastor
@Lastor
Tue, Nov 14, 2023 3:56 PM
總覺得可能是中文輸入的拼音，不是完全走 onInput，我記得有一個神奇的拼音 event 來著，搞不好是這原因
Lastor
@Lastor
Tue, Nov 14, 2023 3:57 PM
隱約記得以前 React 處理過類似問題，搞得快吐血，然後發現 Vue 如果用 v-model，中文輸入會協助處理掉
Lastor
@Lastor
Tue, Nov 14, 2023 3:57 PM
想不太起來，太久遠，只記得以前撞過相關的坑
Lastor
@Lastor
Tue, Nov 14, 2023 3:59 PM
啊靠，我知道了啦，因為手動雙綁的關係，假設我一開始輸入 a，text 跟 input value 的值同步之後
Lastor
@Lastor
Tue, Nov 14, 2023 4:00 PM
我再 key in 一個中文，會因為被 replace 掉了，所以 text 值「沒有變」，於是沒有 trigger re-render。而畫面上顯示的是 input 自身的 value
Lastor
@Lastor
Tue, Nov 14, 2023 4:00 PM
所以看起來會覺得，怎麼響應式壞了
Lastor
@Lastor
Tue, Nov 14, 2023 4:01 PM
如果輸入「a中」之後，再輸入一個英文「a中b」
Lastor
@Lastor
Tue, Nov 14, 2023 4:01 PM
新的 text 會變 "ab"，才成功 trigger re-render
Lastor
@Lastor
Tue, Nov 14, 2023 4:03 PM
如果用 v-model 去綁，實際上等於做了兩個 onInput，第一個 v-model 的負責同步，第二個自己寫的則負責 format，剛好可以完美生效
l• ܫ•) Davyキュルッ
@david50407
Tue, Nov 14, 2023 4:13 PM
喔 原來是這樣的壞
那你可以手動 triggerRef 一下
Lastor
@Lastor
Tue, Nov 14, 2023 4:24 PM
l• ܫ•) Davyキュルッ
: 啊啊，這也是一招
Lastor
@Lastor
Tue, Nov 14, 2023 4:24 PM
我誤會 vue 了，他確實照著我寫的 code 去執行
載入新的回覆
那你可以手動 triggerRef 一下