Vue 3 で作る！簡単 ToDo アプリ - 編集機能を追加しよう！

前回は、Vue 3 を使って基本的な ToDo アプリを作成したので今回は、ToDo アプリに 編集機能 を追加して、より使いやすく進化させたいと思います！

1. 編集モードの追加

まず、ToDo アイテムの編集を可能にするため、編集モードを追加します。

TodoItem.vue

<script setup lang="ts">
import { ref } from 'vue'

/**
 * props
 */
const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})
/**
 * emit
 */
const emit = defineEmits(['toggle', 'delete', 'edit'])

/**
 * リアクティブ変数
 */
const completed = ref(props.item.completed)
const editing = ref(props.item.editing)
const editText = ref(props.item.text)
const originalText = ref(props.item.text) 
/**
 * 関数
 */
const startEditing = () => {
  originalText.value = props.item.text 
  editing.value = true
}

const finishEditing = () => {
  editing.value = false
  emit('edit', props.item, editText.value)
}

const cancelEditing = () => {
  editing.value = false
  editText.value = originalText.value 
}
</script>

<template>
  <li class="todo-item">
    <input type="checkbox" v-model="completed" @change="emit('toggle', props.item)" />
    <span v-if="!editing" :class="{ completed }" @dblclick="startEditing">{{
      props.item.text
    }}</span>
    <input v-else type="text" v-model="editText" />
    <button v-if="!editing" @click="emit('delete', props.item)">削除</button>
    <div v-else>
      <button @click="finishEditing">編集</button>
      <button @click="cancelEditing">キャンセル</button>
    </div>
  </li>
</template>

<style scoped>
// お好みのデザインに変えてください
</style>

• isEditing は編集モードかどうかを表す ref です
  • 編集モードでない場合 (!isEditing) は、テキストと削除ボタンを表示します
  • 編集モードの場合 (isEditing) は、編集用のテキスト入力欄と「編集」ボタン、「キャンセル」ボタンを表示します
• startEditing メソッドは、編集モードを開始します
• finishEditing メソッドは、編集内容を保存し、編集モードを終了します
• cancelEdit メソッドは、編集をキャンセルし、編集モードを終了します
  • originalTextで編集前のテキストを保持することでキャンセルを押下時に戻すことが可能です

2. 親コンポーネントでの処理

親コンポーネントでは特に追加下処理はないので割愛

3. まとめ

こちらの修正で、ToDo アイテムの編集機能が追加されました。編集ボタンをクリックすると編集モードになり、テキストを変更して保存することができます。

次回の記事ではデザインがシンプルすぎるのでCSSでデザインを変えてみたいと思います。