解決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>實體標簽</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)文章
Vuex?可以幫助我們管理共享狀態(tài)，并附帶了更多的概念和框架，本文主要介紹了VUEX如何使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
本篇文章主要介紹了vue基于Element構(gòu)建自定義樹的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
Vue.js 是一種流行的 JavaScript 框架,它提供了一種簡單且高效的方式來構(gòu)建用戶界面,在 Vue 中,父子組件之間的雙向綁定是一種常見的需求,下面我們就來學(xué)習(xí)一下vue中父子組件雙向綁定的常用方法吧2023-10-10
vue?eslint報錯error?"Component?name?"*****"
這篇文章主要給大家介紹了關(guān)于vue?eslint報錯error?“Component?name?“*****“?should?always?be?multi-word”的解決方法,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
element?ui設(shè)置table自適應(yīng)表格寬,不自動換行問題
這篇文章主要介紹了element?ui設(shè)置table自適應(yīng)表格寬,不自動換行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue自定v-model實現(xiàn)表單數(shù)據(jù)雙向綁定問題
vue.js的一大功能便是實現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue自定v-model實現(xiàn) 表單數(shù)據(jù)雙向綁定的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明(多種情況分析)
這篇文章主要介紹了vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明,報錯原因是typescript?只能理解?.ts?文件，無法理解?.vue文件，本文通過多種情況分析給大家詳細講解，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue spa應(yīng)用中的路由緩存問題與解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue中使用Echarts可視化圖表寬度自適應(yīng)的完美解決方案
這篇文章主要介紹了Vue中使用Echarts可視化圖表，寬度自適應(yīng)解決方案,我的解決方案是，在放置Echarts的容器(div)外層再套一層容器(div)，外層容器寬度固定設(shè)置手機屏幕寬，感興趣的朋友跟隨小編一起看看吧2022-09-09
這篇文章主要介紹了vue攔截器組件的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04