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

前回の続き

から実装した方がわかりやすいかもしれません。
今回は、

STEP1 フォームにフォーカスしたらボタンを表示

STEP2 フォームに文字を入力したらボタンの色を変化させたいと思います。

完成例

入力前

STEP1　フォーカス後

STEP2　入力後

このように、フォーカスしたらボタンを表示して、
入力されたらボタンの色をグレーから緑に変えたいと思います。

STEP1

ボタンの設定

v-ifで条件分岐し、isEditing か titleExistsのどちらかがtrueの時だけボタンを表示します。

<button type="submit"
        class="add-button"
        v-if="isEditing || titleExists">
  Add
</button>

CSSの設定

.addable .add-button {
  background-color: #00d78f;
  pointer-events: auto;
  cursor: pointer;
}

STEP2

data: function() {
  return {
    title: '',
    isEditing: false,
  }
},
computed: {
  classList() {
    const classList = ['addlist']

    if (this.isEditing) {
      classList.push('active')
    }
    // ２. cssを追加し、動的にボタンの色を変える
    if (this.titleExists) {
      classList.push('addable')
    }
    return classList
  },
　// １. 文字が入力されたら、titleExistsがtrueになる
  titleExists() {
    return this.title.length > 0
  }
}

動的に変わる流れ

①文字が入力されたら、titleExistsがtrueになる
②trueになったことでcomputedのif文を実行して、cssを追加して動的にボタンの色を変える

これで文字を入力したら、ボタンの色が動的に変わると思います！！