解决vue父组件异步获取动态数据传递给子组件,子组件无法获取值的问题

子组件父组件执行顺序
1、父组件的created --- 2、子组件的created --- 3、子组件的mounted --- 4、父组件的mounted

问题:子组件的表单的fileds一直无法赋值

    父组件
      components: { eform },
        created(){
            this.wordId = this.$route.params.id
              searchWordApi({'id':this.wordId}).then(
                res=>{
                  if(res.code===200){
                    this.fields = res.data
                  }
             }).catch(err=>{
              console.log(err)
        })
    console.log( this.fields )
},
  子组件
    created () {
    this.form = this.$form.createForm(this, {
        mapPropsToFields: () => {
            let filedsDealed={}
            for(let key in this.fileds){
                filedsDealed[key]=this.$form.createFormField({
                    value: this.fileds[key],
                })
            }
            return filedsDealed
        },
        onValuesChange:(_, values)=>{
            this.$emit('change', values);
        },
    });
},      

原因
根据父子组件的执行顺序,父组件传递过来的fileds是初始值,所以赋值失败

方法 在父组件引用的地方给一个v-if判断,如果异步获取的值为初始值则不渲染,等到异步取值完成,v-if再取值渲染。

        <eform
                    v-if="fields.length>0"
                    :formData="formList"
                    :fileds="fields[0]"
                    ref="form"
                    >  
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容