Question

我有一个div和一个文件输入框。当我们点击div时，将触发文件输入的点击。如何在vue.js中执行此操作？

Answer 1

您必须访问DOM才能触发输入的click事件。

但是Vue可以通过ref / $refs feature

使其变得非常方便

有了它，你可以＆＃34;标记＆＃34;模板中的元素，可以在组件代码中方便地访问它，而无需依赖选择器。

＆＃13;

new Vue({
  el: '#app',
  methods: {
    clickHandler() {
      this.$refs.fileInput.click()
    }
  }
})

＆＃13;

.button {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #CCC;
  display: inline-block;
}

＆＃13;

<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>

＆＃13;

Answer 2

为您的输入添加ref，并为您的包装div添加点击监听器

<div @click="triggerFileInput" id="wrapper">
    <input type="file" ref="myFile">
</div>


methods:{
    triggerFileInput(){
        this.$refs.myFile.click();
    }
}

从vue.js中的另一个元素触发元素上的事件

2 个答案: