title: VueJS csv Filereader
body: <p>I'm trying to get the input of a .csv File, after I choose it with my Html 5 input field. Therefor I use a onFileChange method and a FileReader().
  Here is an example I used: <a href="http://codepen.io/Atinux/pen/qOvawK/" rel="noreferrer">http://codepen.io/Atinux/pen/qOvawK/</a> (except that I want to read the text input, and not an image file).</p>
  
  <p>My Problem is, that I get an empty input on the first try, but on the second try it works. Why is that? Any ideas? (I'm a javascript beginner ;) )</p>
  
  <p>html:</p>
  
  <pre><code>&lt;form enctype="multipart/form-data"&gt;
      &lt;input type="file" @change="onFileChange"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>new Vue({
      el: '#app',
      data: {
          fileinput: ''
      },
      methods: {
          onFileChange(e) {
              var files = e.target.files || e.dataTransfer.files;
              if (!files.length)
                  return;
              this.createInput(files[0]);
          },
          createInput(file) {
              var reader = new FileReader();
              var vm = this;
              reader.onload = (e) =&gt; {
  
              vm.fileinput = reader.result;
              }
              reader.readAsText(file);
  
              console.log(this.fileinput);
          }
  
      }
  })
  </code></pre>