0

我目前正在尝试确保我的组件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-show一个之前的v-if存在是否不会让人想起生命周期，因为当我在网络应用程序上时，它被禁用，但是当我切换到移动响应时，它显示为未定义。

有什么解决方案可以解决这个问题吗？我已经看到v-show被使用，this.$nextTick但在我的情况下它真的没有帮助我。我应该把它放在生命周期的另一部分mounted()吗？

4

1 回答 1

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>
于 2020-05-29T16:46:15.777 回答