Как мне обновить значение опций в компоненте Dropzone VueJs?

Question

Я хочу динамически обновить опцию url для компонента dropzone.

Ниже приводится компонент Vue, который у меня есть:

<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>

Когда я пытаюсь выполнить обновление с помощью нажатия кнопки, я вижу, что dropzoneOptions.url был обновлен.Но, когда я пытаюсь загрузить файлы, файлы все еще отправляются на старый URL https://google.com

Ссылка на JSFiddle: https://jsfiddle.net/1t7L6ouc/3/

Answer 1

Существует свойство options, позволяющее определить url.Поскольку вы дали ему ref, вы сможете обновить его следующим образом:

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

Answer 2

Вам необходимо настроить реактив data.

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

data: function () {

    return {
        dropzoneOptions: {
            url : "https://google.com"
        }
    }

}

Если значение все еще не изменяется, вам также может понадобиться использовать метод set.

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

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