こんな方法でclass追加することができるのは意外だった。

4-1 CardAddコンポーネントを作成しよう

①v-bindで関数実行
:class="classList"

<template>
  <form :class="classList" @submit.prevent="addCardToList">
      <input v-model="body"
        type="text"
        class="text-input"
        placeholder="Add new card"
        @focusin="startEditing"
        @focusout="finishEditing"
      >
      <button type="submit" class="add-button" v-if="isEditing || bodyExists">
          Add
      </button>
  </form>
</template>

②computed内で配列定義後、return

computed: {
        classList() {
            const classList = ['addcard']
            if(this.isEditing) {
                classList.push('active')
            }
            if(this.bodyExists) {
                classList.push('addable')
            }
            return classList
        }
}

※methods内で定義してもclass追加されなかった

computedがsetter, getterを持っていることからの挙動?