vue.jsを用いた応募フォームを作ってみた

Vue.js

はじめに

別のアプリを作ることでToDoアプリで得た知識をより固めていこうという主旨の元、今回は応募フォームを作ってみた。

See the Pen 応募フォーム by KKZoo (@kkzoo) on CodePen.

ファイルのアップロードとv-modelについて

ファイルのアップロードを<input type="file">で行うときに<input type="file" v-model="file">ではvue.js側のdataに保存することができないので参考資料1を元にfileの中に読み込んだファイルデータを格納した。

  methods: {
    onDrop: function(event){
      this.file = event.target.files[0];
      console.log(this.file);
    }

このときのevent.targetについては参照資料2の説明で記述されていますが、<input type="file">でデータを受け取るとeventの中のtargetの中にあるfiles[]という配列の中にデータが保存されます。そのデータをthis.fileの中に代入することで、vue.js側でデータを受け取ることができます。

data値の参照渡しについて

最初はindex.htmlとresult.htmlの別々にコードを書いていたのだが、ページ間の参照渡しについて理解不足だったためindex.htmlにまとめて、v-if関数と変数judgを用いることで値を渡すことにした。

ページの切り替えに使ったjudgが以下の値の時に夫々のページを開く様に設計した。

  • 入力フォーム側の値はjudg == false
  • 確認側の値はjudg == true

このページ間の参照渡しに関してはvue.jsらしいもっとスマートなやり方があると思われるので今後の課題になる。

最後に

ファイルアップローダーの作成のところで大分つまったが、その問題について調べてここまで完成することができたのでよかったと思う。