使用v-if隐藏文件输入后，不显示文件名

Question

我正在创建一个vue web应用程序，我有一个简单的文件输入，但有一些逻辑，因为有人可以隐藏或显示文件输入。问题是一旦你隐藏了文件输入，再次显示它就会删除文件名。变量仍保留文件时，文件名不显示。

以下是一些相关代码，并fiddle展示了它。

String.Index

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>