快捷導(dǎo)航

vue v-for循環(huán)出來的數(shù)據(jù)動(dòng)態(tài)綁定值問題

更新時(shí)間：2023年04月17日 14:35:57 作者：爬坑的小白

這篇文章主要介紹了vue v-for循環(huán)出來的數(shù)據(jù)動(dòng)態(tài)綁定值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

v-for循環(huán)出來的數(shù)據(jù)動(dòng)態(tài)綁定值

記錄一下，循環(huán)數(shù)據(jù)動(dòng)態(tài)綁定值

//description這個(gè)數(shù)組是后臺(tái)給的數(shù)據(jù)
//首先遍歷這個(gè)數(shù)組，給這個(gè)數(shù)組加上value這個(gè)字段
?for(let item of description){
? ? ? ? ? ? ? item.value = ''
? ? ?}

//然后在input就可以綁定這個(gè)值了
<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="請(qǐng)輸入內(nèi)容" size="mini" ></el-input>
</div>

最后我們給后端值的時(shí)候只需要把description這個(gè)數(shù)組給他傳過去就好了，里面包括input的值。

使用v-for循環(huán)的輸入框，如何綁定值

問題

一堆輸入框用v-for生成，怎么用v-model綁定這些輸入框的值

思路

vue里面的data定義一個(gè)數(shù)組：formTextList:[]

請(qǐng)求到數(shù)據(jù)的時(shí)候，將后端的數(shù)組賦給前端自己定義的formTextList

v-model綁定到這個(gè)數(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="'請(qǐng)輸入'+item.title" v-model="item.value">
        </div>
 </div>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue2+electron項(xiàng)目搭建過程
文章介紹了如何使用Vue CLI 2搭建Vue項(xiàng)目,并添加Electron插件vue-cli-plugin-electron-builder來創(chuàng)建一個(gè)Vue+Electron項(xiàng)目,文章還提供了啟動(dòng)和打包項(xiàng)目的方法,并提示了下載國內(nèi)網(wǎng)較慢的文件時(shí)可以先注釋掉代碼進(jìn)行調(diào)試,感興趣的朋友一起看看吧
2025-01-01
vue2中使用AntV?以g2plot為實(shí)例
這篇文章主要介紹了vue2中使用AntV?以g2plot為實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache
這篇文章主要介紹了使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
詳解vue-validator（vue驗(yàn)證器）
本篇文章主要介紹了vue-validator（vue驗(yàn)證器）,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-01-01
vue-element-admin登錄全流程分享
這篇文章主要介紹了vue-element-admin登錄全流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
關(guān)于Vue代碼可讀性的幾點(diǎn)建議
凡事有好就又壞，想必大家都知道Vue的作用與優(yōu)點(diǎn)，但是使用的規(guī)程中也總是有很多問題，接下來小編就來向大家講解使用Vue時(shí)應(yīng)注意的一些問題，希望能幫助到大家
2021-09-09
vue 重塑數(shù)組之修改數(shù)組指定index的值操作
這篇文章主要介紹了vue 重塑數(shù)組之修改數(shù)組指定index的值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue3 provide與inject的使用小技巧分享
這篇文章主要介紹了vue3 provide與inject的使用小技巧，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue3?使用?vue3-video-play實(shí)現(xiàn)在線視頻播放
這篇文章主要介紹了vue3?使用?vue3-video-play?進(jìn)行在線視頻播放,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-06-06
vue中給el-radio添加tooltip并實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)方式
這篇文章主要介紹了vue中給el-radio添加tooltip并實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04