title: How to display filename for custom input in Vue?
body: <p>I have a styled file input. It works fine, but after the file selection, I would like to show the selected filename instead of <code>No files selected</code>. How can I do this in Vue?</p>
  
  <pre class="lang-css prettyprint-override"><code>.fileContainer {
    overflow: hidden;
    position: relative;
    background-color: #8181fe;
    color: #fff;
    padding: 6px 18px;
    border-radius: 7px;
    line-height: 21px;
  }
  
  form input, textarea {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #d9dadc;
    border-radius: 7px;
    font-size: 16px;
    color: #393645;
    resize: none;
  }
  
  .fileContainer [type=file] {
    cursor: pointer;
    display: block;
    font-size: 13px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    text-align: right;
    top: -8px;
  } 
  
  .file-info {
    font-size: 13px;
    color: #a9a7a9;
    line-height: 53px;
    padding-left: 10px;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="contact-form" class="contact-form"&gt;
    &lt;form class="form"&gt;
      &lt;div class="section-file"&gt;
        &lt;label class="fileContainer"&gt;
          Select files
          &lt;input type="file" class="file-upload" id="file" name="file" accept="jpg/image/jpeg/image/png"&gt;
        &lt;/label&gt;
  
        &lt;span class="file-info"&gt;No files selected&lt;/span&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>