vue v-for循環(huán)出來的數(shù)據(jù)動態(tài)綁定值問題
更新時間：2023年04月17日 14:35:57 作者：爬坑的小白
這篇文章主要介紹了vue v-for循環(huán)出來的數(shù)據(jù)動態(tài)綁定值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
v-for循環(huán)出來的數(shù)據(jù)動態(tài)綁定值
記錄一下，循環(huán)數(shù)據(jù)動態(tài)綁定值
//description這個數(shù)組是后臺給的數(shù)據(jù)
//首先遍歷這個數(shù)組，給這個數(shù)組加上value這個字段
?for(let item of description){
? ? ? ? ? ? ? item.value = ''
? ? ?}//然后在input就可以綁定這個值了
<div v-for="(item,index) ? in description" ?:key="index" ?style="margin-top: 10px">
? ? ?<span >{{item.fields_describe}}：</span>
? ? ?<el-input clearable ?v-model="item.value" ? ? ?placeholder="請輸入內(nèi)容" size="mini" ></el-input>
</div>最后我們給后端值的時候只需要把description這個數(shù)組給他傳過去就好了，里面包括input的值。
使用v-for循環(huán)的輸入框，如何綁定值
問題
一堆輸入框用v-for生成，怎么用v-model綁定這些輸入框的值
思路
vue里面的data定義一個數(shù)組：formTextList:[]
請求到數(shù)據(jù)的時候，將后端的數(shù)組賦給前端自己定義的formTextList
v-model綁定到這個數(shù)組
代碼：
<div class="mobile" v-for="item in formTextList">
<div>{{item.title}}<i v-if="item.isRequired===1">*</i></div>
<div class="mobile-input">
<input type="text" :placeholder="'請輸入'+item.title" v-model="item.value">
</div>
</div>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
文章介紹了如何使用Vue CLI 2搭建Vue項目,并添加Electron插件vue-cli-plugin-electron-builder來創(chuàng)建一個Vue+Electron項目,文章還提供了啟動和打包項目的方法,并提示了下載國內(nèi)網(wǎng)較慢的文件時可以先注釋掉代碼進行調(diào)試,感興趣的朋友一起看看吧2025-01-01
這篇文章主要介紹了vue2中使用AntV?以g2plot為實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache
這篇文章主要介紹了使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
本篇文章主要介紹了vue-validator（vue驗證器）,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了vue-element-admin登錄全流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
凡事有好就又壞，想必大家都知道Vue的作用與優(yōu)點，但是使用的規(guī)程中也總是有很多問題，接下來小編就來向大家講解使用Vue時應(yīng)注意的一些問題，希望能幫助到大家2021-09-09
vue 重塑數(shù)組之修改數(shù)組指定index的值操作
這篇文章主要介紹了vue 重塑數(shù)組之修改數(shù)組指定index的值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue3 provide與inject的使用小技巧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3?使用?vue3-video-play實現(xiàn)在線視頻播放
這篇文章主要介紹了vue3?使用?vue3-video-play?進行在線視頻播放,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉(zhuǎn)方式
這篇文章主要介紹了vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉(zhuǎn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04