使用v-if隐藏后，文件输入不会显示文件名 [英] File input not shows file name once it is hidden using v-if

问题描述

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

以下是一些相关的代码和小提琴展示它。

 < div id =app> 
< button @ click =switch1 =！switch1> switch1< / button> 
< div v-if =switch1> 
< h4>选择图片< / h4> 
< input type =file@ change =onFileChange> 
< / div> 
< / div> 
  

解决方案当您使用 v-如果，输入不隐藏，它将从DOM中移除。

要隐藏元素，请使用 v-show 代替：



 < div id =app> 
< button @ click =switch1 =！switch1> switch1< / button> 
< div v-show =switch1> 
< h4>选择图片< / h4> 
< input type =file@ change =onFileChange> 
< / div> 
< / div> 
  




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>

解决方案

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>

这篇关于使用v-if隐藏后，文件输入不会显示文件名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！