如何更新 Dropzone VueJs 组件上的 prop 选项值？

Question

I want to update the url option for the dropzone component dynamically later.

Following is the Vue component I have:

<div id="app">
  <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
  <button @click="updateUrl()">
  Update
  </button>
</div>
<script>

new Vue({
  el: "#app",
  data: {
    dropzoneOptions: {
        url : "https://google.com"
    }
  },
  computed:{  
  },
  components: {
    vueDropzone: vue2Dropzone
  },
  methods: {
    updateUrl(){
      console.log("Updating url")
      this.dropzoneOptions.url = "http://example.com"
    }
  }
})
</script>

When I try to update using the button click, I see that the dropzoneOptions.url has been updated. But, when I try uploading files, the files are still posted to the old url https://google.com

Link to JSFiddle: https://jsfiddle.net/1t7L6ouc/3/

Answer 1

There is an options property that lets you define the url . Since you have given it a ref , you should be able to update it like:

this.$refs.myVueDropzone.dropzone.options.url = 'http://example.com';

Answer 2

You need to make your data reactive.

https://v2.vuejs.org/v2/guide/reactivity.html

data: function () {
  
    return {
        dropzoneOptions: {
            url : "https://google.com"
        }
    }

}

If the value still does not change, you may also need to use the set method.

updateUrl(){
    this.$set(this.dropzoneOptions,'url','http://example.com');
}

https://jsfiddle.net/1t7L6ouc/8/

Answer 3

I know it's an old thread but I've come across a similar problem recently, and hopefully my solution might help someone.

I had to post an image to an endpoint looking like api/questions/24/image , 24 being the id of the current "question" being edited. This id would be a store property mapped to my computed properties as questionId . Problem is in my case, there was no button to hook an event to. The images would have to be automatically uploaded. So the URL I needed to use with dropzone was api/questions/${this.questionId}/image .

As I expected and feared, this URL wouldn't resolve correctly with the documented way of putting dropzoneOptions in the Data property, as in the object, this (in this.questionId ) would no longer be referencing the vue instance. After playing around with dropzone hooks/events/methods, I ended up setting the whole dropzoneOptions object as a computed property like this:

computed: {
    dropzoneOptions() {
        return {
            acceptedFileTypes: "image/*",
            url: `/api/questions/${this.questionId}/image`, 
            headers: {
                "X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]").content
            }
        }
    },
   [...]
}

This way, if needed, you can map any parameter to another computed property like so:

computed: {
    uploadUrl() {
        return `/api/questions/${this.questionId}/image`;
    },
    dropzoneOptions() {
        return {
            acceptedFileTypes: "image/*",
            url: this.uploadUrl, 
            headers: {
                "X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]").content
            }
        }
    },
   [...]
}

It doesn't feel like an ideal solution, but that's not too awful either.