javascript - 使用 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>