[英]v-file-input .click() is not a function
I was trying to programmatically trigger.click() event of v-file-input because it has on the documentation at Vuetify.我试图以编程方式触发 v-file-input 的 trigger.click() 事件,因为它在 Vuetify 的文档中有。
but it shows an error this.$refs.imagePicker.click is not a function
am I missing something here?但它显示错误this.$refs.imagePicker.click is not a function
我在这里遗漏了什么吗?
Code Reproduction: https://codepen.io/kforr24/pen/ZEQweLP代码复现: https://codepen.io/kforr24/pen/ZEQweLP
I'm trying to upload an image using a certain button.我正在尝试使用某个按钮上传图片。 Like that certain button would trigger a click event on the v-file-input.就像那个特定的按钮会触发 v-file-input 上的点击事件。
@User28's solution (one of the comments below the question) works: @User28 的解决方案(问题下方的评论之一)有效:
this.$refs.image.$refs.input.click()
UPDATE February 2022 2022 年 2 月更新
The best solution for any version is adding a id to the input or v-file-input then hide the input, in case you use v-file-input remove the icon by passing prepend-icon="" and hide-input.任何版本的最佳解决方案是向输入或 v-file-input 添加一个 id,然后隐藏输入,以防您使用 v-file-input 通过传递 prepend-icon="" 和 hide-input 来删除图标。
<v-btn @click="document.getElementById('uploader').click()">
Upload Button text here
<v-file-input hide-input prepend-icon="" id="uploader"></v-file-input>
</v-btn>
in case you get this error:如果您收到此错误:
TypeError: Cannot read properties of undefined (reading 'getElementById')类型错误:无法读取未定义的属性(读取“getElementById”)
just put document in data只需将文档放入数据中
data: () => ({
document,
other: true
})
For vue 3, refs are deprecated.对于 vue 3,不推荐使用 refs。 I found that a workaround this is by using element id.我发现解决方法是使用元素 ID。 You can use您可以使用
<v-file-input
id="fileUpload"
accept=".pdf"
hide-input
prepend-icon=""
/>
<div>
<v-btn @click="getFile">
UPLOAD
</v-btn>
</div>
then on your event function for your button you can use,然后在您的事件 function 上,您可以使用您的按钮,
const getFile = function () {
let fileUpload = document.getElementById('fileUpload')
if (fileUpload != null) {
fileUpload.click()
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.