Shulou(Shulou.com)05/31 Report--

This article mainly introduces how to use Vue to generate a dynamic form of related knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe you will have a harvest after reading this article on how to use Vue to generate a dynamic form, let's take a look at it.

1. Upload picture component

Upload picture component here uses the uploader component.

Template

Divclass='defaultimages'

Div class=' tag "{item. Title}} / div"

Div vMuffle item. Val==' null 'class=' content'

Uploader

: max-num='8'

: user-imgs='project_image'

@ change='onUploadProject'

/

/ div

Div-elseclass=' img-wrap 'g

T

two。 Multiline input box component

The default multiline input box is 3 lines

{{item.title}}

3. Drop-down selection box component

El-select using element-ui

{{item.title}}

The other two digital single-line input box components and text single-line input box components are similar to multi-line input box components.

Components have been created to facilitate unified management of these custom components. The components are introduced and then exported in the form of export default composition.

/ / single-line text input box component export {defaultasString} from'./string.vue'// single-line number input box component export {defaultasInteger} from'./integer.vue'// multiline text input box component export {defaultasMultiple} from'./multiple.vue'// drop-down list selector component export {defaultasSelect_item} from'./select_item.vue'// upload picture component export {defaultasImages} from'./images.vue'

Then the dynamic form page is uniformly introduced and rendered in the form of Vue dynamic component, and the is attribute is the name of the dynamic component.

Import*asitemElementsfrom'../../components/itemElement'exportdefault {components:itemElements,}

When the above is done, the dynamic form is displayed. The form is generated dynamically, how to validate the form and summarize the form data?

Form data summary

Then the dynamic rendering component, passed in the number parameter, this parameter is used to identify the current component in the dynamic form, to facilitate later filling in the data, the data is saved.

The default value of the value attribute is empty. Listen to the value and emit when the value changes, telling the parent component that the data has changed. Please save it.

Data () {return {value:''}}, watch: {value (v number:this.number,value:this.$data.value o) {this.throttleHandle () = > {this.$emit ('changeComponent', {number:this.number,value:this.$data.value})})}}

But where is the data saved? How do you keep it? Let the back end give an interface to all the fields of a form, take the data and store it in data, and every time the data is updated, you can find out if this field exists, and if so, assign and save it. When it is submitted later, the object is submitted.

Form check

When submitting, you hope that the user can fill out the form and then call the submission API. If the front end is required to verify whether the form is completed or not, please prompt the responding toast to prevent the form from being submitted.

This.checkFrom (freedomConfig,preWordorderData) .then (canSubmit= > {canSubmit&&postSubmitWorkorder (preWordorderData) .then (res= > {if (res.code===0) {showLoading () this.$router.push (`/ detail/$ {res.data.id}`)})})

CheckFrom is our verification method, iterating through the pre-created form, checking the data to see if the field has a value, and giving toast a hint if it doesn't. And returns a promise,resolve (false). Return resolve (true) if all checks are passed. This makes checkFrom an asynchronous function.

It should be noted that the number selected in the drop-down box is greater than 0, and the attribute value of the uploaded image is an array. The creation, verification and data integration of a dynamic form are completed. In many cases, the idea of a scenario where you need to write a lot of code is simple, but you need to think more about abstracting a component.

This is the end of the article on "how to generate a dynamic form using Vue". Thank you for reading! I believe that everyone has a certain understanding of "how to use Vue to generate a dynamic form" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.