從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

你輸入和點擊監聽器添加ref到您的包裝div

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


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