dropActive bug when upload component is wrapped by other component

[fiter92]

I'm using vue-upload-component inside vue-js-modal component:

<modal name="popup">
  <file-upload ref="upload" :drag="true" ... > 
    <button>Load files</button> 
  </file-upload> 
  <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active">
    <h3>Drop files to upload</h3>
  </div> 
</modal>

When I'm opening a modal and trying to drag files - the .drop-active doesn't showing up ( but files dragging properly)
And .drop-active doesn't showing up until I have drag or upload files using a button. After that it works fine.
It happens only if vue-upload-component is inside vue-js-modal component.

[denis-markushin]

I run into the same issue. Have you found a solution?

[fiter92]

Nope =(

[onlunar]

Here's a solution：
reference：Accessing-Child-Component-Instances-amp-Child-Elements
Accessing $refs from within templates or computed propertie should be avoided as $refs are only populated after the component has been rendered, and they are not reactive.So when the modal opened,the $refs.upload is still undefined,yet accessable in the $nextTick after the next DOM update cycle.
Check the example below,using element-ui components.

<el-button @click="handleUpload">Open Dialog</el-button>
<el-dialog :visible.sync="uploadVisible" ...>
  <div v-show="uploader && uploader.dropActive" class="drop-active">
    <h3>Drop to Upload</h3>
  </div>
 <file-upload ref="upload" ...>Click Or Drop Files</file-upload>
</el-dialog>

data(){
  return {
    uploader: false
  }
},
methods:{
  handleUpload() {    
      this.uploadVisible = true;  
      // this.$refs.upload -> undefined
      this.$nextTick(() => {  
          // this.$refs.upload -> Vue Component
          this.uploader = this.$refs.upload;  
      });  
  }
}

[JoshMoreno]

For anyone who's having problems with this, see my pr #346 for workarounds until the pr gets merged