Vue 动态生成数据字段

最新推荐文章于 2024-08-29 10:03:44 发布

openight

最新推荐文章于 2024-08-29 10:03:44 发布

阅读量2.9k

点赞数

分类专栏： Vue前端框架文章标签： Vue父子传值异步数据动态数据

本文链接：https://blog.csdn.net/risingfine/article/details/83508198

版权

本文介绍了如何在Vue中动态生成数据字段并处理异步数据。首先，父组件通过异步请求获取配置数据和实际数据；接着，子组件接收这些数据；由于数据获取是异步的，需要监听数据变化，当数据加载完成后显示子组件；通过计算属性检查所有数据是否加载完毕，使用v-if进行条件渲染；最后展示了完整的子组件代码。

摘要由CSDN通过智能技术生成

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;
  }
},

<list-item :config="config" :list="list" v-if="showItem"

关注

专栏目录