如何更新 Dropzone VueJs 组件上的道具选项值?
How do I update prop options value on the Dropzone VueJs component?
我想稍后动态更新 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 已更新。但是,当我尝试上传文件时,文件仍然发布到旧 url https://google.com
Link 到 JSFiddle:https://jsfiddle.net/1t7L6ouc/3/
你需要让你的 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');
}
有一个options
property that lets you define the url
。既然你给了它一个 ref
,你应该可以像这样更新它:
this.$refs.myVueDropzone.dropzone.options.url = 'http://example.com';
我知道这是一个旧线程,但我最近遇到了类似的问题,希望我的解决方案可以帮助别人。
我必须 post 将图像发送到看起来像 api/questions/24/image
的端点,24 是当前正在编辑的“问题”的 ID。这个 id 将是一个商店 属性 映射到我的计算属性 questionId
。问题是在我的情况下,没有按钮可以挂钩事件。图片必须自动上传。
所以我需要与 dropzone 一起使用的 URL 是 api/questions/${this.questionId}/image
.
正如我所预料和担心的那样,这个 URL 无法通过记录的将 dropzoneOptions 放入数据 属性 的方式正确解析,如对象 this (in this.questionId
) 将不再引用 vue 实例。在玩过 dropzone hooks/events/methods 之后,我最终将整个 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
}
}
},
[...]
}
感觉这不是一个理想的解决方案,但也不是太糟糕。
我想稍后动态更新 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 已更新。但是,当我尝试上传文件时,文件仍然发布到旧 url https://google.com
Link 到 JSFiddle:https://jsfiddle.net/1t7L6ouc/3/
你需要让你的 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');
}
有一个options
property that lets you define the url
。既然你给了它一个 ref
,你应该可以像这样更新它:
this.$refs.myVueDropzone.dropzone.options.url = 'http://example.com';
我知道这是一个旧线程,但我最近遇到了类似的问题,希望我的解决方案可以帮助别人。
我必须 post 将图像发送到看起来像 api/questions/24/image
的端点,24 是当前正在编辑的“问题”的 ID。这个 id 将是一个商店 属性 映射到我的计算属性 questionId
。问题是在我的情况下,没有按钮可以挂钩事件。图片必须自动上传。
所以我需要与 dropzone 一起使用的 URL 是 api/questions/${this.questionId}/image
.
正如我所预料和担心的那样,这个 URL 无法通过记录的将 dropzoneOptions 放入数据 属性 的方式正确解析,如对象 this (in this.questionId
) 将不再引用 vue 实例。在玩过 dropzone hooks/events/methods 之后,我最终将整个 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
}
}
},
[...]
}
感觉这不是一个理想的解决方案,但也不是太糟糕。