将Dropzone.js与Vue.js一起使用

我试图在通过Vue.js生成的Rails表单中使用Dropzone.js。 我已将dropzone.js文件放在app / assets / javascripts /中。

然后我创建了一个单文件components / dropzone.vue组件：

 
   export default { data() { return { greeting: 'blah' } }, created: function() { var myDropzone = new Dropzone("div#image-drop", { url: "/file/post"}); } }   

我从主vue文件中调用此组件：

 import Vue from 'vue/dist/vue.esm'; import dropzone from 'components/dropzone'; document.addEventListener('DOMContentLoaded', () => { const listingForm = new Vue({ el: '#listing-multistep', data: { activeStep: 0 }, components: { dropzone } }) }) 

在我的Rails _form.html.erb部分我有

 
 ... 
 
 ... 
 
 ... 
 
 
Images
 
  
 
 ...  Previous   Next  

但Dropzone未在

上初始化。 知道我可能做错了什么吗？

提前致谢

Answer 1

在第一次阅读这个问题时，我认为你已经创建了一个包装器组件，因为它使用了 。 但是，从下面链接的小提琴，似乎并非如此。 将外部库与Vue一起使用时，通常需要将外部库function包装在Vue组件中。 这是一个非常基本的例子。

 Vue.component("dropzone",{ template: `
`, mounted(){ new Dropzone(this.$el, { url: "/file/post" }) } }) 

这是一支展示该组件的笔 。

Dropzone会发出许多事件 ，您可能希望自定义此基本组件以侦听并发出Vue，以便它知道发生的事情。

原始答案

创建组件时， div#image-drop尚不存在。

使用已mounted 。

请参阅生命周期图 。

如下所述，由于您隐藏了模板的某些部分，因此您可能希望切换到v-show而不是v-if 。 区别在于v-show将隐藏元素呈现给DOM，但隐藏它们，而v-if在需要之前不呈现它们。

如果你想坚持使用v-if你需要将一块watch添加到activeStep 。

 watch:{ activeStep(newVal){ if (3 == newVal) this.$nextTick(() => new Dropzone("div#image-drop", { url: "/file/post"})) } }