File input not shows file name once it is hidden u

Question

I am creating a vue web app, I have a simple file input, but there is some logic, due to which someone can hide or show the file input. Problem is once you hide the file input, and show again, it removes the file name. File name does not show while variable still holds the file.

Here is some relevant code and fiddle demonstrating it.

<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

When you use v-if, the input is not hidden, it's removed from DOM.

To hide an element, use v-show instead:

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