Vue.js를 사용하여 사용하기 쉬운 양식 작성.

완성 예

정상시

포커스 후

input 태그에 V-on 이벤트 설정

<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>