v-ifを使用して非表示にされたファイルの入力がファイルに表示されない

Question

vue Webアプリケーションを作成していますが、単純なファイル入力ですが、ファイル入力を表示または非表示にできるロジックがあります。問題は、ファイル入力を非表示にして再び表示すると、ファイル名を削除することです。変数がまだファイルを保持している間は、ファイル名は表示されません。

ここにいくつかの関連するコードがあり、fiddleがこれを実演しています。

<div id="app"> 
    <button @click="switch1=!switch1">switch1</button> 
    <div v-if="switch1"> 
    <h4>Select an image</h4> 
    <input type="file" @change="onFileChange"> 
    </div> 
</div> 

Answer 1

あなたはv-ifを使用すると、入力が隠されていないが、それは、DOMから削除されます。

代わりv-showを使用し、要素を非表示にするには：

<div id="app"> 
    <button @click="switch1=!switch1">switch1</button> 
    <div v-show="switch1"> 
    <h4>Select an image</h4> 
    <input type="file" @change="onFileChange"> 
    </div> 
</div>