[英]Trigger an event on an element from another element in vue.js
我有一个 div 和一个文件输入框。 当我们点击 div 时,会触发文件输入的点击。 如何在 vue.js 中做到这一点?
您必须访问 DOM 才能触发输入的点击事件。
但是 Vue 可以通过ref
/ $refs
功能使它变得非常方便
有了它,您可以在模板中“标记”一个元素,并在组件代码中方便地访问它,而无需依赖选择器。
new Vue({ el: '#app', methods: { clickHandler() { this.$refs.fileInput.click() } } })
.button { padding: 10px; border-radius: 5px; border: 1px solid #CCC; display: inline-block; }
<script src="https://unpkg.com/vue@2.3/dist/vue.js"></script> <div id="app"> <div class="button" @click="clickHandler">Click me!</div> <input type="file" ref="fileInput"> </div>
为您的输入添加一个ref
并为您的包装器div
添加一个单击侦听器
<div @click="triggerFileInput" id="wrapper">
<input type="file" ref="myFile">
</div>
methods:{
triggerFileInput(){
this.$refs.myFile.click();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.