Vue form表單動態(tài)添加組件實(shí)戰(zhàn)案例
今天我們來給大家介紹下在Vue開發(fā)中我們經(jīng)常會碰到的一種需求場景，就是在form中我們需要動態(tài)的增加組件模塊，效果如下:
這種效果實(shí)現(xiàn)其實(shí)就是對 v-for 指令的一種使用，組件不是必須的，只是為了將這部門的代碼我們單獨(dú)的拎出來，便于查看，好了，話不多說，我們來看下具體怎么來實(shí)現(xiàn)。
案例效果的實(shí)現(xiàn)
1.創(chuàng)建組件
首先我們創(chuàng)建一個單獨(dú)的組件，同時(shí)在 template 中定義我們的表單元素，此處使用的是 element UI 來實(shí)現(xiàn)效果。
2.import組件
我們需要在父組件中引入創(chuàng)建的組件，并通過 v-for 來實(shí)現(xiàn)動態(tài)處理的效果，關(guān)鍵代碼如下
使用組件
在 data 中定義 edus 數(shù)組.
3.實(shí)現(xiàn)添加功能
要實(shí)現(xiàn)動態(tài)添加組件的功能，我們需要通過點(diǎn)擊添加的按鈕來增加數(shù)組 edus 中的元素，如下
let addEduView = function(){
this.edus.push({})
}
如此即可實(shí)現(xiàn)動態(tài)添加的功能。
4.實(shí)現(xiàn)移除功能
實(shí)現(xiàn)移除動態(tài)添加的組件，我們需要在組件中調(diào)用父組件中的方法。如下
父組件中定義移除的方法
let deleteEducation = function(index){
if (index !== 0) {
this.edus.splice(index, 1)
}
}
子組件中回調(diào)
5.提交數(shù)據(jù)
當(dāng)我們要提交表單數(shù)據(jù)的時(shí)候，怎么將動態(tài)添加的組件中的數(shù)據(jù)一并提交給后臺服務(wù)呢，步驟如下:
提交數(shù)據(jù)的時(shí)候?qū)?edus 數(shù)組中的數(shù)據(jù)和表單數(shù)據(jù)一塊轉(zhuǎn)換為 JSON 數(shù)據(jù)提交到后臺。
6.清空組件
最后操作完成需要將動態(tài)添加的組件處理掉怎么實(shí)現(xiàn)呢？其實(shí)效果很簡單，我們只需要清空 edus 數(shù)組即可
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ref用來輔助開發(fā)者在不依賴于jQuery的情況下,獲取DOM元素或組件的引用,下面這篇文章主要給大家介紹了關(guān)于Vue混合文件使用以及ref的引用的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了關(guān)于Element-UI中slot的用法及說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue仿寫帶過渡效果的下拉菜單功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
bpmn.js是一個BPMN2.0渲染工具包和web建模器,使得畫流程圖的功能在前端來完成,這篇文章主要給大家介紹了關(guān)于vue3集成bpmn.js的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了mpvue+vuex搭建小程序詳細(xì)教程(完整步驟)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue.js 的內(nèi)聯(lián)表達(dá)式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。如果涉及更復(fù)雜的邏輯，你應(yīng)該使用計(jì)算屬性。下面這篇文章主要給大家介紹了Vue.js中的計(jì)算屬性,需要的朋友可以參考借鑒，一起來看看吧。2017-01-01
這篇文章主要介紹了vue移動端寫的拖拽功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
正則表達(dá)式是由一些特定的字符組成,代表一個規(guī)則,可以用來檢驗(yàn)數(shù)據(jù)格式是否合法,也可以在一段文本中查找滿足要求的內(nèi)容,這篇文章主要給大家介紹了關(guān)于VUE正則表達(dá)式用法的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue中的事件加判斷條件如何進(jìn)行選擇性點(diǎn)擊
這篇文章主要介紹了vue中的事件加判斷條件如何進(jìn)行選擇性點(diǎn)擊方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Element實(shí)現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作
這篇文章主要介紹了Element實(shí)現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06