欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue?el-input輸入框輸入不了的解決方法

 更新時(shí)間:2022年11月12日 11:30:41   作者:琹箐  
在工作中遇到N次input無(wú)法輸入的問(wèn)題,所以下面這篇文章主要給大家介紹了關(guān)于vue?el-input輸入框輸入不了的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、問(wèn)題

1.今天寫(xiě)代碼遇到了一個(gè)很奇葩的問(wèn)題:寫(xiě)了很多個(gè)輸入框,其他輸入框都沒(méi)有問(wèn)題,就最后一個(gè)單獨(dú)處理的有問(wèn)題,輸入框里面輸入不了東西。著實(shí)不明白為什么,一遍又一遍抱怨,重復(fù)輸入,里面還是除了原有的值什么都輸不了。

除了原有的3,什么都輸不了

二、解決方法

1.用vue dev-tools審查了才發(fā)現(xiàn)這個(gè)輸入框無(wú)論輸入什么,value值都是不變化,盡管 也觸發(fā)了input事件(和html沒(méi)有關(guān)系)

html的邏輯也完全相同,定義的對(duì)象的value和v-model綁定

            <!-- 輸入框 -->
            <template v-if="item.type === 'input'">
              <el-input
                class="col"
                :id="key"
                v-model="item.value"
                :clearable="item.inputClearable"
                @input="handleInput($event, item)"
              ></el-input>
            </template>

輸入了,但是 value不變

輸入后,value實(shí)時(shí)變化

2.仔細(xì)比較兩個(gè)地方有什么不同,好像也沒(méi)有什么區(qū)別,如圖2-1所示。

終于突發(fā)奇想,看到了下面沒(méi)有reactive,可能是響應(yīng)性丟失(根本原因)了。

圖2-1 兩段聲明,也沒(méi)有特殊邏輯

3.于是在下面的聲明上也加上了reactive,竟然好了,可以輸入了?。?!

  

三、總結(jié)

1.天哪,我也是沒(méi)有料到竟然是因?yàn)轫憫?yīng)式丟失,導(dǎo)致無(wú)法輸入的(value無(wú)法更新);世界很大,無(wú)奇不有,掉進(jìn)坑里很迷茫。

2.遇到輸入框無(wú)法輸入可以

   1)先檢查html,查看input輸入事件是否觸發(fā);觸發(fā)了,則html是正確的

   2)檢查v-model綁定的值:必須是響應(yīng)式的(在data選項(xiàng)中定義的,或是setup函數(shù)中用reactive或ref顯示聲明為響應(yīng)式數(shù)據(jù))

到此這篇關(guān)于vue el-input輸入框輸入不了解決的文章就介紹到這了,更多相關(guān)vue el-input輸入框輸入不了內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue+canvas實(shí)現(xiàn)移動(dòng)端手寫(xiě)簽名

    vue+canvas實(shí)現(xiàn)移動(dòng)端手寫(xiě)簽名

    這篇文章主要為大家詳細(xì)介紹了vue+canvas實(shí)現(xiàn)移動(dòng)端手寫(xiě)簽名,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • vue關(guān)閉瀏覽器退出登錄的實(shí)現(xiàn)示例

    vue關(guān)閉瀏覽器退出登錄的實(shí)現(xiàn)示例

    本文主要介紹了vue關(guān)閉瀏覽器退出登錄,一般都是根據(jù)根據(jù)beforeunload和unload這兩個(gè)事件執(zhí)行的。本文就詳細(xì)的介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下
    2021-12-12
  • vue3使用拖拽組件draggable.next的保姆級(jí)教程

    vue3使用拖拽組件draggable.next的保姆級(jí)教程

    做項(xiàng)目的時(shí)候遇到了一個(gè)需求,拖拽按鈕到指定位置,添加一個(gè)輸入框,這篇文章主要給大家介紹了關(guān)于vue3使用拖拽組件draggable.next的保姆級(jí)教程,需要的朋友可以參考下
    2023-06-06
  • 深入了解Vue組件七種通信方式

    深入了解Vue組件七種通信方式

    vue組件通信的方式,這是在面試中一個(gè)非常高頻的問(wèn)題。其實(shí)Vue組件的通信方式除了props和?$emit還有很多,本文將對(duì)vue組件通信方式進(jìn)行一下總結(jié),感興趣的可以學(xué)習(xí)一下
    2021-12-12
  • Vue3實(shí)現(xiàn)優(yōu)雅加載圖片的動(dòng)畫(huà)效果

    Vue3實(shí)現(xiàn)優(yōu)雅加載圖片的動(dòng)畫(huà)效果

    這篇文章主要為大家詳細(xì)介紹了Vue3如何實(shí)現(xiàn)加載圖片時(shí)添加一些動(dòng)畫(huà)效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下
    2023-10-10
  • vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能示例

    vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能示例

    這篇文章主要介紹了vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能,涉及基于vue的事件響應(yīng)、數(shù)據(jù)交互等相關(guān)操作技巧,需要的朋友可以參考下
    2019-05-05
  • Vue出現(xiàn)did you register the component correctly?解決方案

    Vue出現(xiàn)did you register the component 

    這篇文章主要介紹了Vue出現(xiàn)did you register the component correctly?解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue組件傳值(高級(jí))、屬性傳值、反向傳值、跨級(jí)傳值實(shí)例詳解

    vue組件傳值(高級(jí))、屬性傳值、反向傳值、跨級(jí)傳值實(shí)例詳解

    父組件通過(guò)屬性傳值給子組件,父組件修改數(shù)據(jù)后會(huì)刷新頁(yè)面并重新傳值給子組件,子組件可以修改父組件傳的值并刷新自己的頁(yè)面?但是并不會(huì)修改父組件中的值,這篇文章主要介紹了vue組件傳值(高級(jí))、屬性傳值、反向傳值、跨級(jí)傳值,需要的朋友可以參考下
    2022-09-09
  • 查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法

    查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法

    這篇文章主要大家介紹了查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法,文章通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2023-11-11
  • 使用elementUI table展開(kāi)行內(nèi)嵌套table問(wèn)題

    使用elementUI table展開(kāi)行內(nèi)嵌套table問(wèn)題

    這篇文章主要介紹了使用elementUI table展開(kāi)行內(nèi)嵌套table問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04

最新評(píng)論