入力フォームを追加削除できる機能を実装してみる use Vue & Vuetify

今回はVue.jsで入力フォームを追加削除できる機能を実装してみます。
試しにデザインにVuetifyを使ってみました。
今回はvue-cliを使っております。
vueのバージョンは2.9.6でした。

動作はこんな感じ。

まずはVuetifyの準備から。
Vuetifyのマテリアルデザインを適用するためにmain.jsに↓を追加しておきます。

mport Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

簡単ですね。

Vueファイルのソースはこんな感じ。

<template>
  <div class="hello">
    <h2>Essential Links</h2>
    <v-flex xs6 class="ma-auto">
      <v-layout row v-for="input in inputList" :key="input.id">
          <v-text-field
            v-model="input.text"
          ></v-text-field>
          <v-btn fab dark small color="red" @click="removeInput(input.id)">
              <v-icon dark>remove</v-icon>
          </v-btn>
      </v-layout>
      <v-btn fab dark small color="blue" @click="addInput()">
          <v-icon dark>add</v-icon>
      </v-btn>
    </v-flex>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      inputList: [{id: 0, text: ''}]
    }
  },
  methods: {
    addInput () {
      let inputList = this.inputList
      inputList.push({
        id: inputList.length,
        text: ''
      })
    },
    removeInput (id) {
      let inputList = this.inputList
      inputList = inputList.filter((input) => { return input.id !== id })
      let newInputList = []
      for (let i = 0; i < inputList.length; i++) {
        newInputList.push({
          id: i,
          text: inputList[i].text
        })
        console.log(i)
      }
      this.inputList = newInputList
    }
  }
}
</script>

動作としては、
1. +ボタンをクリックするとaddInputメソッドが発火、inputListの最後に新たにオブジェクトを生成。
こちらはinputListに新たなオブジェクトをpushしているだけです。

2. 各フォームの右端にある-ボタンをクリックするとremoveInputが発火、クリックした-ボタンに付随するファームを削除。
こちらは
i) 削除したいオブジェクトのidを持つオブジェクトをinputListから除外
ii) inputListをidを0から順に並べ直す
ことをしています。
spliceを使えばいいじゃんと思われるかもしれませんが、spliceはオブジェクトを削除してもidは更新されず良からぬ挙動をするので今回の実装では使っておりません。
まどろっこしいかもしれませんがこれが安牌…？

Vue.jsもVuetifyも公式ドキュメントが超充実してるのでとても使いやすいです。
Vuetifyのロゴが結構好みなので公式ストアからTシャツが発売されててちょっと欲しいのですが、アメリカなのか日本なのかはたまた違う国なのか、どこから発送されるのかが気になるところ。
Store — Vuetify.js

おしまい。

=============================
あとがき

今年ももうすぐ終わってしまいますね。
学生の時よりも働いていた時の方が月日が過ぎるのは早いように感じます…

今年はプライベートでは暇さえあればゲームをしていたので、来年はその時間を他の時間として使っていきたいです…
ちなみに今年は、
ディシディアFFNT：約500時間
ペルソナ5：約130時間
キングダムハーツFM1.5：約60時間
Marvel's Spider-Man：約30時間

計720時間を1年間PS4のゲームをプレイしていることになります。
毎日約2時間はやっていることになりますね…

まだKHFM1.5+2.5の6作品のうち1作品しかやっていないし、来年にはKH3やキャサリン等も発売されるのでこの生活はまだまだ続きそうです。
でも積みゲーはしない主義。

さらに追記
ディシディアFFNTは現在無料版を配信中！
Free_Edition | DISSIDIA FINAL FANTASY NT | SQUARE ENIX
興味があれば是非とは言えませんがどうぞ。