工作生活

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

2019-07-04  本文已影响0人  echo三文鱼

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

猜你喜欢

热点阅读