Vue怎么动态生成数据字段

本篇内容主要讲解"Vue怎么动态生成数据字段"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"Vue怎么动态生成数据字段"吧!

动态生成数据字段实例

1.父组件定义data里面的数据字段

异步请求获取数据(一种配置数据，一种实际数据)

data () {  return {    config: [],    list: []  };}

2.子组件接收数据

props: {  config: Array,  list: Array},data () {  return {    newConfig: [],    configLength: 0,    newList: []  };}

3.因为获取数据是异步操作

因此需要监听数据变化，当有数据时展示子组件

configLoaded: false,listLoaded: false

定义上面两个变量来判断数据是否加载完成，在异步获取完数据后赋值为true，并监听

watch: {  configLoaded (n, o) {        this.configLoaded = n;  },  listLoaded (n, o) {    this.listLoaded = n;  }},

4.计算属性计算两个变量是否均完成

并执行v-if

computed: {  showItem () {    return this.configLoaded && this.listLoaded;  }},

5.子组件完整代码

表单动态生成字段

checkbox 多选，没有默认值的时候，一定要给一个空数组，不然就展示不出来

   
                                                        {{option.label}}                                                                                                      {{city.label}}                                                                                                                        

到此，相信大家对"Vue怎么动态生成数据字段"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！