将Dropzone.js与Vue.js结合使用 [英] Use Dropzone.js with Vue.js

问题描述

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

I am trying to use Dropzone.js within a Rails form that is generated via Vue.js. I've placed the dropzone.js file in app/assets/javascripts/.

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

I then created a single-file components/dropzone.vue component as such:

<template>
  <div id="image-drop"></div>
</template>

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

<style></style>

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

I call this component from my main vue file:

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 部分中，我有

and in my Rails _form.html.erb partial I have

<fieldset class="listing-step" v-if="activeStep === 0">
  ...
</fieldset>

<fieldset class="listing-step" v-if="activeStep === 1">
  ...
</fieldset>

<fieldset class="listing-step" v-if="activeStep === 2">
  ...
</fieldset>

<fieldset class="listing-step" v-if="activeStep === 3">
  <h2>Images</h2>
  <div class="form-group">
    <dropzone></dropzone>
  </div>
</fieldset>

...

<button type="reset" @click="activeStep--" :disabled="activeStep === 0"/>
  Previous
</button>

<button type="reset" @click="activeStep++" :disabled="activeStep === stepList.length - 1"/>
  Next
</button>

但是Dropzone并未在< div id = image-删除> 。
知道我可能在做什么错吗？

But Dropzone is not being initialized on <div id="image-drop">. Any idea what I may be doing wrong?

预先感谢

推荐答案

在第一次阅读此问题时，我认为您已经创建了包装器组件，因为它使用了< dropzone>< / dropzone> 。但是从下面的小提琴链接来看，情况似乎并非如此。在Vue中使用外部库时，通常您希望将外部库功能包装在Vue组件中。这是一个非常基本示例。

On first reading this question, I thought you had already created a wrapper component, because it uses <dropzone></dropzone>. But from the fiddle linked below, that doesn't appear to be the case. When using an external library with Vue, typically you want to wrap the external library functionality in a Vue component. Here is a very basic example.

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

这是一支钢笔，演示了该组件。

Dropzone发出<一个href = http://www.dropzonejs.com/#event-list rel = nofollow noreferrer>许多事件，您可能希望自定义此基本组件以侦听并向Vue发出声音，因此

Dropzone emits many events, that you may want to customize this basic component to listen to and emit to Vue so that it knows about things that happened.

原始答案

当组件创建后， div＃image-drop 尚不存在。

When the component is created, div#image-drop does not yet exist.

使用 mount 。

请参见生命周期图。

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

As mentioned below, since you are hiding parts of the template, you may want to switch to v-show instead of v-if. The difference being that v-show renders the hidden elements to the DOM, but hides them, whereas v-if doesn't render them until they are needed.

如果您想坚持使用 v-if ，则需要将手表添加到 activeStep 。

If you want to stick with v-if you would need to add a watch to activeStep.

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

这篇关于将Dropzone.js与Vue.js结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！