Error on using into components.

[Zuxriddin]

I'm using element-ui dialog. Into my dialog I defined croppie, but vue js can't see ref of croppie.

`

<el-dialog
@OPEN="openCropWindow"
width="600px"
class="modal"
title="Photo"
:visible.sync="avatarModal">
<vue-croppie
ref="croppieRef"
:enable-resize="true"
:mouse-wheel-zoom="false"
:enable-orientation="true"
:viewport="{ width: 200, height: 200, type: 'circle' }"
@Result="result">

`

[Joff Tiquez]

It's because the component is not yet loaded inside the dialog component. If your dialog has a on-open event, add the vue-croppie component after that event.

[Zuxriddin]

I resolved this problem with nextTick. On open dialog we can add this code:

this.$nextTick(function () {
     self.$refs.croppieRef.bind({
       url: base_url + self.logo,
     })
   })

[Joff Tiquez]

@zuxriddinkamalov nice!