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

【问题标题】：How do I update prop options value on the Dropzone VueJs component?如何更新 Dropzone VueJs 组件上的 prop 选项值？
【发布时间】：2018-12-20 04:01:48
【问题描述】：

我想稍后动态更新 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>

当我尝试使用按钮单击进行更新时，我看到 dropzoneOptions.url 已更新。但是，当我尝试上传文件时，文件仍会发布到旧网址https://google.com

到 JSFiddle 的链接：https://jsfiddle.net/1t7L6ouc/3/

【问题讨论】：

标签： javascript vuejs2 vue2-dropzone

【解决方案1】：

有一个options 属性可让您定义url。既然你给了它一个ref，你应该可以像这样更新它：

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

【讨论】：

【解决方案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/

【讨论】：

试过你的方法。仍然没有工作。这是小提琴：jsfiddle.net/1t7L6ouc/4
确实如此，即使您设置的小提琴也在工作。我在控制台中看到它从google.com 变为example.com。它甚至可以在不使用 $set 方法的情况下工作。 jsfiddle.net/1t7L6ouc/8

【解决方案3】：

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

我必须将图像发布到类似于api/questions/24/image 的端点，24 是当前正在编辑的“问题”的 id。这个 id 将是一个存储属性，映射到我的计算属性为questionId。问题是在我的情况下，没有按钮可以挂钩事件。图像必须自动上传。所以我需要与 dropzone 一起使用的 URL 是 api/questions/${this.questionId}/image。

正如我所预料和担心的那样，这个 URL 无法正确解析，将 dropzoneOptions 放在 Data 属性中，就像在对象中一样，this（在 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
            }
        }
    },
   [...]
}

感觉不是一个理想的解决方案，但也不算太糟糕。

【讨论】：