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