溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關Vue中form表單動態如何添加組件的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
效果如下:
這種效果實現其實就是對 v-for 指令的一種使用，組件不是必須的，只是為了將這部門的代碼我們單獨的拎出來，便于查看，好了，話不多說，我們來看下具體怎么來實現。
案例效果的實現
1.創建組件
首先我們創建一個單獨的組件，同時在 template 中定義我們的表單元素，此處使用的是 element UI 來實現效果。
2.import組件
我們需要在父組件中引入創建的組件，并通過 v-for 來實現動態處理的效果，關鍵代碼如下
使用組件
在 data 中定義 edus 數組.
3.實現添加功能
要實現動態添加組件的功能，我們需要通過點擊添加的按鈕來增加數組 edus 中的元素，如下
let addEduView = function(){
this.edus.push({})
}如此即可實現動態添加的功能。
4.實現移除功能
實現移除動態添加的組件，我們需要在組件中調用父組件中的方法。如下
父組件中定義移除的方法
let deleteEducation = function(index){
if (index !== 0) {
this.edus.splice(index, 1)
}
}
子組件中回調
5.提交數據
當我們要提交表單數據的時候，怎么將動態添加的組件中的數據一并提交給后臺服務呢，步驟如下:
提交數據的時候將 edus 數組中的數據和表單數據一塊轉換為 JSON 數據提交到后臺。
6.清空組件
最后操作完成需要將動態添加的組件處理掉怎么實現呢？其實效果很簡單，我們只需要清空 edus 數組即可
感謝各位的閱讀！關于“Vue中form表單動態如何添加組件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
