element ui 在Dialog對(duì)話框中使用 el-upload 上傳圖片后不回顯的問題

我是在<el-dialog> 對(duì)話框中使用表單<el-form>提交數(shù)據(jù),在上傳圖片時(shí),使用<el-upload>標(biāo)簽上傳,此時(shí)問題來了,我明明在上傳成功回調(diào)方法中已經(jīng)將imgUrl重置了啊,但是并沒有回顯出來。


<!--上傳圖片-->
<el-upload
            :headers="headers"
            :action="uploadPath"
            :show-file-list="false"
            :on-success="uploadSuccessHandle"
            :before-upload="onBeforeUpload"
            class="avatar-uploader"
            accept=".jpg, .jpeg, .png, .gif"
          >
            <img v-if="dataForm.imgUrl" :src="dataForm.imgUrl" class="avatar" >
            <i v-else class="el-icon-plus avatar-uploader-icon" />
 </el-upload>
 
 
//上傳圖片成功后回調(diào)的方法
uploadSuccessHandle(e) {
  this.dataForm.imgUrl = e.url
}

我思考了會(huì),猜測(cè)是在<el-dialog>中,已經(jīng)彈出顯示的對(duì)話框不能根據(jù)數(shù)據(jù)刷新節(jié)點(diǎn)。

需要加上以下代碼

this.$forceUpdate()

例如:

uploadSuccessHandle(e) {
  this.$forceUpdate()
  this.dataForm.imgUrl = e.url
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容