解決vue頁面注入js修改input值問題
更新時(shí)間：2024年03月24日 10:25:06 作者：想要打代碼
這篇文章主要介紹了解決vue頁面注入js修改input值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
解決vue頁面注入js修改input值
一般會(huì)直接這樣寫
let zz = document.getElementsByClassName('el-input__inner')[0];
zz.value = 'test';但在某些前端框架，例如Vue之類的，Vue的input弄個(gè)雙向綁定啥的，此時(shí)我們用原生的JS企圖去控制輸入框的值就會(huì)出現(xiàn)無效的情況(明明input上有數(shù)字或者字符但是點(diǎn)擊按鈕就是說你沒填內(nèi)容)。
只有當(dāng)接收到鍵盤的按鍵(隨便哪個(gè)鍵盤的按鍵消息)，才會(huì)觸發(fā)input和change事件,進(jìn)而把輸入框中的value賦值給預(yù)設(shè)的相關(guān)變量，到這一步才算走完整個(gè)設(shè)置value的過程。
所以如果想給這類加料的輸入框或者選擇框用原生JS賦值，設(shè)置vlaue屬性過后就必須手動(dòng)觸發(fā)一下input或change事件。
下面是例子
var zz = document.getElementsByClassName('el-input__inner')[0]
zz.value = 'test'
var event = document.createEvent('Event');
event.initEvent("input", true, true);//如果是select選擇框把"input"改成"change"
event.eventType = 'message'
zz.dispatchEvent(event)vue循環(huán)input框且對(duì)應(yīng)修改值
效果：
<li>
<span>實(shí)體名稱</span>:
<span>{{ newKnowName }}</span>
</li>
<li>
<span>實(shí)體標(biāo)簽</span>: <span> {{ newKnowLabel }}</span>
</li>
<li>
<span>實(shí)體屬性</span>:
<ul>
<li v-for="(item, index) in newKnowPros" :key="index">
<span>{{ item.key }}</span>
:
<span><input type="text" v-model="item.value"/></span>
</li>
</ul>
</li>
//入庫
mergeEntity() {
console.log(this.newKnowPros); //可直接獲取綁定數(shù)組修改后的值
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue 的雙向綁定原理與用法,結(jié)合實(shí)例形式總結(jié)分析了Vue 的雙向綁定基本原理、功能、用法及注意事項(xiàng),需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了第一個(gè)Vue插件從封裝到發(fā)布的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue3常用的API使用簡(jiǎn)介，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-03-03
vue elementUI 表單嵌套驗(yàn)證的實(shí)例代碼
這篇文章主要介紹了vue + elementUI 表單嵌套驗(yàn)證,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue中組件通信詳解(父子組件, 爺孫組件, 兄弟組件)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
關(guān)于vue.js v-bind 的一些理解和思考
本篇文章主要介紹了關(guān)于vue.js v-bind 的一些理解和思考，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
unplugin-auto-import與unplugin-vue-components安裝問題解析
這篇文章主要為大家介紹了unplugin-auto-import與unplugin-vue-components問題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
vue實(shí)現(xiàn)選項(xiàng)卡及選項(xiàng)卡切換效果
這篇文章主要介紹了vue實(shí)現(xiàn)選項(xiàng)卡選項(xiàng)卡切換效果,這里的Vue以單文件的形式引入，另外代碼在實(shí)現(xiàn)上會(huì)一步步的進(jìn)行優(yōu)化。需要的朋友可以參考下2018-04-04
這篇文章主要為大家介紹了LogicFlow內(nèi)置插件使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了Vue自定義名稱下載PDF,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08