解決vue父組件異步獲取動態(tài)數(shù)據(jù)傳遞給子組件,子組件無法獲取值的問題

子組件父組件執(zhí)行順序
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);
        },
    });
},      

原因
根據(jù)父子組件的執(zhí)行順序,父組件傳遞過來的fileds是初始值,所以賦值失敗

方法 在父組件引用的地方給一個v-if判斷,如果異步獲取的值為初始值則不渲染,等到異步取值完成,v-if再取值渲染。

        <eform
                    v-if="fields.length>0"
                    :formData="formList"
                    :fileds="fields[0]"
                    ref="form"
                    >  
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容