VueでCSVファイルをテーブル表示してみた

こちらの記事を参考にさせていただきました。
JavaScriptでCSVファイルを2次元配列に変換

サンプル

こちら

Githubは下記です。
https://github.com/Kackie/vue_csvReader

ソート機能について

入力フィールドをv-modelで双方向バインディングし、csvの行ごとに検索キーワードでソートをかけてから2次元配列に変換しています。

//ソート
for(var j=0;j<arr.length;j++){
    if(j===0){
        sortArr.push(arr[j]);
    }else if(arr[j].indexOf(this.keyword) !== -1) {
        sortArr.push(arr[j]);
    }
}

//1次元配列を2次元配列に変換
var res = [];
for(var i = 0; i < sortArr.length; i++){
    //空白行が出てきた時点で終了
    if(sortArr[i] == '') break;

    //","ごとに配列化
    res[i] = sortArr[i].split(',');
}

まとめ

最近Vueを勉強中です。双方向バインディングやtransitionが便利で仕事でも早く試してみたいなーと思います。
初めてUdemyを使って勉強しているんですが、いいサービスですね。セールをよくやっているので色々挑戦してみようと思えますし、動画を見ながら手を動かせるのが個人的にとてもやりやすくて、楽しく学習中です。

これを作った経緯としては、もともとSlackのBotを使ってその日のランチ場所をランダムに決めるっていうのをやっていて、Vueの練習用にちょうどいいcsvファイルができたのでソート機能をいれつつ一覧表示してみようと思い作ってみました。
csvの1行目がテーブルのヘッダーになり、項目も自由に増減できるので、対応中の案件の管理なんかにも使いまわしています。

他にも新宿（3丁目、東口周辺）でオススメの飯処あったら教えてください！