How to generate data fields dynamically by Vue

This article mainly explains "how to generate data fields dynamically by Vue". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to generate data fields dynamically by Vue".

Dynamically generate data field instance 1. The parent component defines the data fields in the data

Asynchronous request to get data (a configuration data, an actual data)

Data () {return {config: [], list: []} 2. The subcomponent receives data props: {config: Array, list: Array}, data () {return {newConfig: [], configLength: 0, newList: []};} 3. Because getting data is an asynchronous operation

Therefore, it is necessary to listen for data changes and display subcomponents when data is available.

ConfigLoaded: false,listLoaded: false

Define the above two variables to determine whether the data is loaded or not, assign it to true after getting the data asynchronously, and listen

Watch: {configLoaded (n, o) {this.configLoaded = n;}, listLoaded (n, o) {this.listLoaded = n;}, 4. Calculate the attribute whether the calculation of both variables is complete

And execute v-if

Computed: {showItem () {return this.configLoaded & & this.listLoaded;}}, 5. The complete subcomponent code {{m.name}} {{m.text}}

Export default {name: 'Item', props: {config: Array, list: Array}, data () {return {newConfig: [], configLength: 0, newList: []}, mounted () {this.toConfig ();}, methods: {toConfig () {this.configLength = this.config.length For (let i in this.config) {let configItem = this.config [I]; this.newConfig.push ({name: configItem.fieldName, text: configItem.fieldDesc});} for (let l in this.list) {let item = this.list [l]; let childList = [] For (var c in this.newConfig) {let config = this.newConfig [c]; for (let key in item) {if (config.name = key) {childList.push ({name: config.text, text: item [key]});} this.newList.push (childList) The form generates fields dynamically

Checkbox multiple selection, when there is no default value, be sure to give an empty array, otherwise it will not be displayed

{{option.label}} {{city.label}} so far I believe that you have a deeper understanding of "how to dynamically generate data fields in Vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!