Question

我目前正在尝试确保在应用程序的初始加载时禁用了我的组件vue2dropzone，然后在尝试使应用程序对移动设备进行响应时，我开始在控制台中注意到此错误。 / p>

[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之前是否不让我们回顾生命周期，因为当我在Web应用程序上时，它被禁用了，但是当我切换到移动响应时它显示为未定义。

是否有解决方案？我已经看到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组件

1 个答案: