Vue form表單動(dòng)態(tài)添加組件實(shí)戰(zhàn)案例
今天我們來(lái)給大家介紹下在Vue開(kāi)發(fā)中我們經(jīng)常會(huì)碰到的一種需求場(chǎng)景，就是在form中我們需要?jiǎng)討B(tài)的增加組件模塊，效果如下:
這種效果實(shí)現(xiàn)其實(shí)就是對(duì) v-for 指令的一種使用，組件不是必須的，只是為了將這部門的代碼我們單獨(dú)的拎出來(lái)，便于查看，好了，話不多說(shuō)，我們來(lái)看下具體怎么來(lái)實(shí)現(xiàn)。
案例效果的實(shí)現(xiàn)
1.創(chuàng)建組件
首先我們創(chuàng)建一個(gè)單獨(dú)的組件，同時(shí)在 template 中定義我們的表單元素，此處使用的是 element UI 來(lái)實(shí)現(xiàn)效果。
2.import組件
我們需要在父組件中引入創(chuàng)建的組件，并通過(guò) v-for 來(lái)實(shí)現(xiàn)動(dòng)態(tài)處理的效果，關(guān)鍵代碼如下
使用組件
在 data 中定義 edus 數(shù)組.
3.實(shí)現(xiàn)添加功能
要實(shí)現(xiàn)動(dòng)態(tài)添加組件的功能，我們需要通過(guò)點(diǎn)擊添加的按鈕來(lái)增加數(shù)組 edus 中的元素，如下
let addEduView = function(){
this.edus.push({})
}
如此即可實(shí)現(xiàn)動(dòng)態(tài)添加的功能。
4.實(shí)現(xiàn)移除功能
實(shí)現(xiàn)移除動(dòng)態(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í)候，怎么將動(dòng)態(tài)添加的組件中的數(shù)據(jù)一并提交給后臺(tái)服務(wù)呢，步驟如下:
提交數(shù)據(jù)的時(shí)候?qū)?edus 數(shù)組中的數(shù)據(jù)和表單數(shù)據(jù)一塊轉(zhuǎn)換為 JSON 數(shù)據(jù)提交到后臺(tái)。
6.清空組件
最后操作完成需要將動(dòng)態(tài)添加的組件處理掉怎么實(shí)現(xiàn)呢？其實(shí)效果很簡(jiǎn)單，我們只需要清空 edus 數(shù)組即可
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue項(xiàng)目中的類使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解vue 自定義marquee無(wú)縫滾動(dòng)組件
這篇文章主要介紹了vue自定義marquee無(wú)縫滾動(dòng)組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Vue3（三）網(wǎng)站首頁(yè)布局開(kāi)發(fā)
這篇文章主要介紹了Vue3網(wǎng)站首頁(yè)布局開(kāi)發(fā)，上篇文章已經(jīng)提到集成Ant Design Vue后，和Element Ui一樣，還是組件的使用，接下倆我們就來(lái)看看Vue3網(wǎng)站首頁(yè)布局開(kāi)發(fā)的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容2021-10-10
Vue3使用video-player實(shí)現(xiàn)視頻播放
video-player是一個(gè)基于video.js的視頻播放器組件,本文主要介紹了Vue3使用video-player實(shí)現(xiàn)視頻播放,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
vue改變對(duì)象或數(shù)組時(shí)的刷新機(jī)制的方法總結(jié)
這篇文章主要介紹了vue改變對(duì)象或數(shù)組時(shí)的刷新機(jī)制的方法總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
Vue3封裝自動(dòng)滾動(dòng)列表指令(含網(wǎng)頁(yè)縮放滾動(dòng)問(wèn)題）
本文主要介紹了Vue3封裝自動(dòng)滾動(dòng)列表指令(含網(wǎng)頁(yè)縮放滾動(dòng)問(wèn)題），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue如何在for循環(huán)中設(shè)置ref并獲取$refs
眾所周知在寫循環(huán)的時(shí)候給循環(huán)中的數(shù)據(jù)定義ref以便再下面直接通過(guò)this.$ref.來(lái)訪問(wèn),下面這篇文章主要給大家介紹了關(guān)于vue如何在for循環(huán)中設(shè)置ref并獲取$refs的相關(guān)資料,需要的朋友可以參考下2022-12-12
如果項(xiàng)目中多個(gè)組件都使用到WebSocket請(qǐng)求,那么我們需要對(duì)WebSocket進(jìn)行封裝,方便我們使用,下面這篇文章主要給大家介紹了關(guān)于Vue2和Vue3中如何使用WebSocker封裝的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了手寫實(shí)現(xiàn)Vue計(jì)算屬性，本文從一個(gè)簡(jiǎn)單的計(jì)算屬性例子開(kāi)始，一步步實(shí)現(xiàn)了計(jì)算屬性。并且針對(duì)這個(gè)例子，詳細(xì)分析了頁(yè)面渲染時(shí)的整個(gè)代碼執(zhí)行邏輯，需要的小伙伴可以參考一下2022-08-08