解決Vue?input輸入框卡死的問題
原因
我把 vuex 全局變量 $store.state.search.key 綁定到 v-model 上，然后在頁面掛載時(shí)通過代碼修改 $store.state.search.key 的值，最后在頁面上輸入任意值 input 框就卡住了
解決方法
1.input 標(biāo)簽增加 @input 屬性
<input v-model='$store.state.search.key' @input="forceUpdateInput">
2.methods 中增加對(duì)應(yīng)方法
forceUpdateInput(){this.$forceUpdate();}補(bǔ)充：下面看下Vue-element中el-input輸入卡頓問題
最近使用Vue-element時(shí)，遇到了el-input輸入卡頓問題，影響用戶體驗(yàn)，如下
el-input是這樣寫的，沒有加額外的事件
<el-input v-model="code" placeholder="code" type="textarea" :rows="1"/>
解決方法
使用.lazy修飾符
使用.lazy的修飾符可以取消v-model的雙向綁定，避免輸入改變?cè)黾雨?duì)列造成卡頓
注意：el-input底層代碼會(huì)將文本框用div包裹，
所以直接在el-input中使用.lazy修飾符是不成功的，測(cè)試了這種寫法確實(shí)無效
//不成功的使用方法
<el-input v-model.lazy="code" placeholder="code"></el-input>
//成功的使用方法("el-textarea__inner"類可以讓樣式與框架一致)
<textarea class="el-textarea__inner" v-model.lazy="code" placeholder="code"></textarea>textarea class="el-textarea__inner"成功的替換了el-input，并且.lazy生效了，不卡頓了，nice
到此這篇關(guān)于Vue input輸入框卡死的解決辦法的文章就介紹到這了,更多相關(guān)Vue input輸入框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解vue簡單的store，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
vue draggable resizable 實(shí)現(xiàn)可拖拽縮放的組件功能
這篇文章主要介紹了vue draggable resizable 實(shí)現(xiàn)可拖拽縮放的組件功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章介紹了Vue.js中v-bind指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
vue v-model實(shí)現(xiàn)自定義樣式多選與單選功能
這篇文章主要介紹了vue v-model實(shí)現(xiàn)自定義樣式多選與單選功能所遇到的問題,本文給大家?guī)砹私鉀Q思路和實(shí)現(xiàn)代碼，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue單元格多列合并的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
關(guān)于ElementUI自定義Table支持render
這篇文章主要介紹了關(guān)于ElementUI自定義Table支持render，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-quill-editor富文本編輯器超詳細(xì)入門使用步驟
vue中很多項(xiàng)目都需要用到富文本編輯器,在使用了ueditor和tinymce后,發(fā)現(xiàn)并不理想,所以果斷使用vue-quill-editor來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue-quill-editor富文本編輯器入門使用步驟的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue實(shí)現(xiàn)html轉(zhuǎn)化pdf并復(fù)制文字
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)html轉(zhuǎn)化pdf的兩種方式,分別為能復(fù)制文字和不能復(fù)制文字的方法,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件
這篇文章主要介紹了詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
在 Vue 3 中,如果你使用 reactive 來定義一個(gè)響應(yīng)式對(duì)象,那么這個(gè)對(duì)象的屬性是不能被重新賦值的,因?yàn)?nbsp;reactive 會(huì)將對(duì)象的屬性轉(zhuǎn)換為 getter/setter,這樣 Vue 才能追蹤到屬性的變化,這篇文章主要介紹了vue3 中使用 reactive 的問題,需要的朋友可以參考下2024-03-03