ファイル入力のクリック機能を「v-on」イベントにバインドする方法は？

Question

Vue.jsでかなりアップローダーを書こうとしています。私はちょうど<input type="file">要素を隠し、mdlボタンがクリックされている間、トリガークリック機能をします。

次のコードは私の実装です。

テンプレート：

<form method="post" action="#" @submit.prevent=""> 
    <input id="fileInput" type="file"> 
    <mdl-button type="submit" @click="onClick" colored raised> 
    <span>Upload</span> 
    </mdl-button> 
</form> 

スクリプト：

export default { 
    data() { 
    return { 
     filePath: null 
    } 
    }, 
    methods: { 
    onClick: function (e) { 
     document.getElementById('fileInput').click() 
    } 
    } 
} 

スタイル：

#fileInput { 
    display: none; 
} 

我々はdocument.getElementByIdはVueのスタイルではないことに気づくことができます。

fileInputのクリック機能をmdl-buttonのクリックイベントにバインドするのはどうですか？

Answer 1

mdl-buttonを<label>タグに変更するだけで簡単にできます。それは同様にそれが意味的に、より貴重とアクセスできるようになります。

<form method="post" action="#" @submit.prevent=""> 
    <input id="fileInput" type="file"> 
    <mdl-button type="submit" colored raised> 
    <label for="fileInput">Upload</label> 
    </mdl-button> 
</form> 

を私はあなたの<mdl-button>コンポーネントが含まれているマークアップのどのようなわからないんだけど、あなただけ<label>とボタン要素として使うものは何でも交換することをお勧めします素子。