Vue this.$refs 在 vue2-dropzone 组件中的 mounted() 期间未定义

Question

我目前正在尝试确保我的组件vue2dropzone 在应用程序的初始加载时被禁用，然后当我尝试使应用程序移动响应时，我开始注意到控制台中的这个错误.

[Vue warn]: Error in mounted hook: "TypeError: this.$refs.vue2dropzone is undefined"

接着是

TypeError: "this.$refs.vue2dropzone is undefined"

我注意到 Vue 中出现了这个问题，根据我的研究，这似乎是一个常见问题，因此当您在组件子项中有 v-if 或 v-else-if 修改以显示某些内容时，生命周期将再次被调用。

我的 vue2dropzone 组件代码片段仅包含

在我的打字稿文件中

private mounted() {
  this.$refs.vue2dropzone.disable(); 
}

在我的 vue 文件中

    <div v-if="some condition">
     <form>
       <vue2Dropzone 
       ref="vue2dropzone" 
       id="dropzone" 
       class="vue-dropzone"
       ></vue2Dropzone> 
     </form>
    </div>
    <div v-else-if="some other condition">
     <form>
       <vue2Dropzone 
       ref="vue2dropzone" 
       id="dropzone" 
       class="vue-dropzone"
       ></vue2Dropzone> 
     </form>
   </div>

我开始怀疑第一个 v-if 之前的 v-show 是否不会让我们回忆起生命周期，因为当我在网络应用程序上时，它被禁用但是当我切换到移动响应显示为未定义。

有什么办法可以解决这个问题吗？我已经看到 v-show 被使用并且 this.$nextTick 但它对我的情况确实没有帮助。除了 mounted() 之外，我应该把它放在生命周期的另一部分吗？

Answer 1

好的，所以我找到了解决这个问题的方法。似乎 vue 应用程序正在加载，很可能因为 v-if 存在，直到其他异步进程完全加载后才满足条件，这很可能已经超过了 mounted 生命周期。

为了解决这个问题，我们可以使用 vue2-dropzone 的本机功能，即 vdropzone-mounted 因此无论何时切换或加载，该功能都会运行。

例如

创建函数以使用vue2-dropzone

的禁用功能

public disableDropZoneBox() {    
  this.$refs.vue2dropzone.disable();
}

在 vue 文件中

 <vue2Dropzone 
 ref="vue2dropzone" 
 id="dropzone" 
 class="vue-dropzone"
 @vdropzone-mounted="disableDropZoneBox"
 ></vue2Dropzone>

Vue this.$refs 在 vue2-dropzone 组件中的 mounted() 期间未定义

Vue this.$refs is undefined during mounted() in vue2-dropzone component

typescript

vue.js

vue-component

hook

vue2-dropzone