In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-02 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
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!
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.
Views: 235
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.