Vue|Vue 动态生成数据字段的实例 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|Vue 动态生成数据字段的实例