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