vue.js v-file-input .click()不是函数

uqjltbpv  于 2023-10-23  发布在  Vue.js
关注(0)|答案(4)|浏览(165)

我试图以编程方式触发v-file-input的.click()事件,因为它在Vuetify的文档中。

但它显示一个错误this.$refs.imagePicker.click is not a function我错过了什么吗?

代码复制:https://codepen.io/kforr24/pen/ZEQweLP
我正在尝试使用某个按钮上传图像。就像某个按钮会在v-file-input上触发一个click事件。

8zzbczxx

8zzbczxx1#

@User28的解决方案(问题下面的评论之一)有效:
this.$refs.image.$refs.input.click()

x9ybnkn6

x9ybnkn62#

对于vue 3,refs被弃用。我发现一个解决方法是使用元素id。您可以使用

<v-file-input
  id="fileUpload"
  accept=".pdf"
  hide-input
  prepend-icon=""
/>
<div>
  <v-btn @click="getFile">
    UPLOAD
  </v-btn>
</div>

然后在你的按钮的事件函数上,你可以使用,

const getFile = function () {
  let fileUpload = document.getElementById('fileUpload')
  if (fileUpload != null) {
    fileUpload.click()
  }
}
wlwcrazw

wlwcrazw3#

2022年2月更新

  • 任何版本的最佳解决方案都是为输入或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>
  • 如果你得到这个错误:*

TypeError:无法读取未定义的属性(阅读“getElementById”)

  • 只需将文档放入数据 *
data: () => ({
    document,
    other: true
})
44u64gxh

44u64gxh4#

<v-file-input ref="fileInput"/>

<v-btn @click="open">
  UPLOAD
</v-btn>

open(){
  this.$refs.fileInput.$refs.input.click()
}

相关问题