美文网首页工作生活
解决vue父组件异步获取动态数据传递给子组件,子组件无法获取值的

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

作者: echo三文鱼 | 来源:发表于2019-07-04 18:07 被阅读0次

子组件父组件执行顺序
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"
                    >  

相关文章

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/mrzrhctx.html