vue.js 2のファイル入力としてリンクを作成する方法は？このような

Question

マイVUEコンポーネント：

<template> 
    ... 
     <a href="javascript:;" class="thumbs" 
      :title="upload"> 
      <span class="fa fa-plus fa-2x"></span> 
     </a> 
    ... 
</template> 
<script> 
    export default { 
     props: ['...'], 
     data() { 
       return { 
        ... 
       }; 
     }, 
     computed:{ 
      ... 
     } 
    } 
</script> 

私は、リンクをクリックした場合、それはJavaScriptでファイル

をアップロードすることができますしたい、私はそれを知っています。もしjavascriptがこのような場合：How to make a link act as a file input

しかし、vue.js 2でどうすればいいですか？

Answer 1

これは実際にはCSS、as explained hereのみを使用して行うことができます。

例（上記のリンクから）：

.fileContainer { 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.fileContainer [type=file] { 
 
    cursor: inherit; 
 
    display: block; 
 
    font-size: 999px; 
 
    filter: alpha(opacity=0); 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
    opacity: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    text-align: right; 
 
    top: 0; 
 
} 
 

 
/* Example stylistic flourishes */ 
 

 
.fileContainer { 
 
    background: red; 
 
    border-radius: .5em; 
 
    float: left; 
 
    padding: .5em; 
 
} 
 

 
.fileContainer [type=file] { 
 
    cursor: pointer; 
 
} 
 
}

<p>So various methods prevent file upload inputs from being styled conveniently. But that needn't be the case!</p> 
 
<label class="fileContainer"> 
 
    Click here to trigger the file uploader! 
 
    <input type="file"/> 
 
</label>

Answer 2

Iが小さな誤解があると信じている：Vue.js 2 がまだジャバスクリプトです。その目標はPolymerと同じではありませんcomponents - それはJSを強化することになっています。それを別の構造で置き換えるのではなく、

@David HallbergJönssonの答えはVue.js 2で完璧にうまく動作します。あなたはVueのコンポーネントの構造に特異的にそれをしたい場合は：あなたがあなたのリンクでプログラム的な方法を使用したい場合は

<template> 
<!-- ... --> 
    <a class="fileContainer"> 
     Click here to trigger the file uploader! 
     <input type="file"> 
    </a> 
<!-- ... --> 
</template> 
<script> 
export default { 
    props: ['...'], 
    data() { 
      return { 
       ... 
      }; 
    }, 
    computed:{ 
     ... 
    } 
} 
</script> 
<style> 
a.fileContainer { 
    overflow: hidden; 
    position: relative; 
    cursor: pointer; 
    display: inline-block; 
    color: lightskyblue; 
} 

a.fileContainer:hover { 
    text-decoration: underline; 
    color: blue; 
} 

a.fileContainer > input[type=file] { 
    cursor: inherit; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    text-align: right; 
} 
</style> 

、some browsers don't allow you to trigger click events on input type="file" elementsので、簡単なことではないだろう。あなたの最善の策は、このようにすることです。

（また、技術的にはあなたはまだVueのではjQueryを使用することができますので、あなたはそれを望んでいた場合はそのリンクのコードはまだ仕事ができる。）

をあなたがアップロードしたファイルを処理する方法を知りたい場合は、manyがありますtutorialsおよびsomecomponentsはすでに既製です。