Javascript 如何更新Dropzone VueJs组件上的道具选项值？

我想稍后动态更新dropzone组件的url选项

以下是我拥有的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>

更新
新Vue({
el:“应用程序”，
数据：{
dropzoneOptions：{
url:“https://google.com"
}
},
计算：{
},
组成部分：{
vueDropzone:vue2Dropzone
},
方法：{
updateUrl（）{
日志（“更新url”）
this.dropzoneOptions.url=”http://example.com"
}
}
})

当我尝试使用按钮单击进行更新时，我看到dropzoneOptions.url已更新。但是，当我尝试上传文件时，文件仍然被发布到旧的url

https://google.com

---

链接到JSFiddle:

您需要使您的

数据成为被动的


如果值仍然没有更改，则可能还需要使用set方法

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

您需要使您的
数据成为被动的


如果值仍然没有更改，则可能还需要使用set方法

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

有一个属性可用于定义。既然您已经给它一个
ref
，您应该能够像这样更新它：

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

有一个属性可用于定义。既然您已经给它一个
ref
，您应该能够像这样更新它：

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

我知道这是一个旧的线程，但我最近遇到了一个类似的问题，希望我的解决方案可以帮助别人

我不得不将一张图像发布到一个端点，看起来像
api/questions/24/image
，24是当前正在编辑的“问题”的id。此id将是映射到我的计算属性的存储属性，如
questionId
。问题是，在我的例子中，并没有可以将事件挂接到的按钮。这些图像必须自动上传。
因此，我需要在dropzone中使用的URL是
api/questions/${this.questionId}/image

正如我所预料和担心的那样，这个URL不能正确解析，因为在对象中（在
this.questionId
）将不再引用vue实例。在使用dropzone挂钩/事件/方法之后，我最终将整个dropzoneOptions对象设置为计算属性，如下所示：

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

这样，如果需要，可以将任何参数映射到另一个计算属性，如下所示：

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
            }
        }
    },
   [...]
}

感觉这不是一个理想的解决方案，但也不算太糟糕。
我知道这是一个老问题，但最近我遇到了类似的问题，希望我的解决方案能帮助别人

我不得不将一张图像发布到一个端点，看起来像
api/questions/24/image
，24是当前正在编辑的“问题”的id。此id将是映射到我的计算属性的存储属性，如
questionId
。问题是，在我的例子中，并没有可以将事件挂接到的按钮。这些图像必须自动上传。
因此，我需要在dropzone中使用的URL是
api/questions/${this.questionId}/image

正如我所预料和担心的那样，这个URL不能正确解析，因为在对象中（在
this.questionId
）将不再引用vue实例。在使用dropzone挂钩/事件/方法之后，我最终将整个dropzoneOptions对象设置为计算属性，如下所示：

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

这样，如果需要，可以将任何参数映射到另一个计算属性，如下所示：

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
            }
        }
    },
   [...]
}

感觉这不是一个理想的解决方案，但也不是太糟糕。
尝试了你的方法。还是不行。这是小提琴：它是的，甚至你设置的小提琴也在工作。我在控制台中看到它从变为。它甚至可以在不使用$set方法的情况下工作。我试过你的方法。还是不行。这是小提琴：它是的，甚至你设置的小提琴也在工作。我在控制台中看到它从变为。它甚至可以在不使用$set方法的情况下工作。