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

【问题标题】：File input not shows file name once it is hidden using v-if使用 v-if 隐藏文件输入后不显示文件名
【发布时间】：2017-09-22 14:00:36
【问题描述】：

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

这里是一些相关代码和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>

【问题讨论】：

使用 v-show="switch1" ：这不会删除和创建 DOM 元素
是的 @SLYcee 是对的 - v-if 从 DOM 中删除元素，因为 v-show 只切换可见性。
这就是任何input 元素在重新渲染时没有绑定值的行为方式。文件输入的问题是无法从 Javascript 设置它们（出于安全原因）。它们是只读的。这就是为什么您不能使用v-model 而必须使用change 处理程序的原因，以及为什么当您基于v-if 重新渲染时该值会消失。

标签： javascript html input vue.js vuejs2

【解决方案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>

【讨论】：