ユーザビリティなフォームの作成①

Vue.jsを使用して、ユーザビリティなフォームの作成。

完成例

通常時

フォーカス後

このように、フォーカス後にフォームの色をグレーから白に変えていきたいと思います。

inputタグにV-onイベントを設定

• フォーカスされた時に@focusinを発火させ、startEditingを実行
• フォーカスされていない時は@focusoutを発火させ、finishEditingを実行

<input v-model="title" 
       type="text" 
       class="text-input"
       placeholder="Add new list"
       @focusin="startEditing"
       @focusout="finishEditing"
>

data() {
  return {
    title: '',
　　// 通常時はフォーカスしていないのでfalseに設定
    isEditing: false,
　}
},
methods: {
  addList() {
　  this.$store.dispatch('addlist', { title: this.title })
    this.title = ''
  },
  // フォーカスされた時
  startEditing() {
    this.isEditing = true
  },
  // フォーカスしていない時
  finishEditing() {
    this.isEditing = false
  },
}

isEditingの状態がtrueの時だけactiveクラスを動的に追加します

.active .text-input {
  background-color: #fff;
}

computedでdataにあるisEditingの状態を監視

data() {
  return {
    title: '',
    isEditing: false,
  }
},
// ★ここから追加
computed: {
  classList() {
    const classList = ['addlist']
    // isEditingがtrueならactiveクラスを追加
    if (this.isEditing) {
      classList.push('active')
    }
    return classList
  },
},
// ★ここまで追加
methods: {

上記で定義したcomputedをformにバインドさせる

<form :class="classList" @submit.prevent="addList">
  <input v-model="title"
          type="text"
          class="text-input"
          placeholder="Add new list"
          @focusin="startEditing"
          @focusout="finishEditing"
  >
  <button type="submit"
          class="add-button">
    Add
  </button>
</form>

フォーカス後、フォームの色が変わっていたら成功です！