vue.js内の別の要素の要素のイベントをトリガーします

Question

divとファイル入力ボックスがあります。 divをクリックすると、ファイル入力のクリックがトリガーされます。 vue.jsでこれを行うには？

Answer 1

入力にクリックイベントをトリガーするには、DOMにアクセスする必要があります。

しかし、Vueのはそれでref/$refsfeature

とそれはかなり便利に、あなたができる「マーク」テンプレート内の要素とセレクタに頼ることなく、あなたのコンポーネントのコード内から便利にアクセスすることができます。

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>

Answer 2

div

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


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