//description這個(gè)數(shù)組是后臺給的數(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="請輸入內(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:[]

請求到數(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="'請輸入'+item.title" v-model="item.value">
        </div>
 </div>

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Vue3.x源碼調(diào)試的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue3.x源碼調(diào)試的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
npm如何更新VUE package.json文件中依賴的包版本
這篇文章主要介紹了npm如何更新VUE package.json文件中依賴的包版本問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁面實(shí)現(xiàn)方式
本文講述如何實(shí)現(xiàn)擁有酷炫背景視頻的登錄頁面，瀏覽器窗口隨意拉伸，背景視頻及前景登錄組件均能完美適配，背景視頻可始終鋪滿窗口，前景組件始終居中，視頻的內(nèi)容始終得到最大限度的保留，可以得到最好的視覺效果
2018-01-01
vue之this.$router.push頁面刷新問題
這篇文章主要介紹了vue之this.$router.push頁面刷新問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
vue2.0在沒有dev-server.js下的本地?cái)?shù)據(jù)配置方法
這篇文章主要介紹了vue2.0在沒有dev-server.js下的本地?cái)?shù)據(jù)配置方法的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-02-02
vue虛擬化列表封裝的實(shí)現(xiàn)
這篇文章主要介紹了vue實(shí)現(xiàn)虛擬化列表封裝方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue 大文件上傳和斷點(diǎn)續(xù)傳的實(shí)現(xiàn)
文件上傳在很多項(xiàng)目中都用的到，如果是幾M的很快就傳送完畢，如果是大文件呢？本文就介紹了Vue 大文件上傳和斷點(diǎn)續(xù)傳的實(shí)現(xiàn)，感興趣的可以了解一下
2021-06-06
vue3動態(tài)加載組件以及動態(tài)引入組件詳解
?平常的vue項(xiàng)目開發(fā),已經(jīng)很難遇見一千行,甚至幾千行代碼的頁面了,畢竟大家都會去拆分組件,下面這篇文章主要給大家介紹了關(guān)于vue3動態(tài)加載組件以及動態(tài)引入組件的相關(guān)資料,需要的朋友可以參考下
2023-03-03
解決vue表單為空也能提交的問題
這篇文章主要介紹了解決vue表單為空也能提交的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
關(guān)于vue項(xiàng)目proxyTable配置和部署服務(wù)器的問題
這篇文章主要介紹了關(guān)于vue項(xiàng)目proxyTable配置和部署服務(wù)器的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04