【TODOアプリ】画面の作成 ~ Vue.js 実装編 ~

TODOアプリの画面Iを作成します。Nuxt.jsを使用して、TODOの登録・閲覧・編集・削除操作を実装します。細かい解説は省くのと、最小構成での実装方法をまとめます。

実行環境

• Node.js v14.18.1
• npm 8.1.1
• NuxtJS v2.15.8
• tailwind 4.2.0

実装手順

1. プロジェクトの雛形を作成

以下のコマンドを実行しプロジェクトの雛形を作成

$ npm init nuxt-app simple-todo-nuxt

$ cd simple-todo-nuxt
$ npm install
$ npm run dev
# http://localhost:3000 にアクセスして動作確認

nuxt.js セットアップ情報

2.APIを呼ぶ実装を追加

 methods: {
    async getTasks () {
      this.tasks = await this.$axios.$get('http://localhost:8080/tasks')
    },
    async createTask () {
      await this.$axios.$post('http://localhost:8080/tasks', this.form)
      await this.getTasks()
    },
    async deleteTask (taskId) {
      await this.$axios.$delete(`http://localhost:8080/tasks/${taskId}`)
      await this.getTasks()
    }
  }
}

3. 表示側の実装を追加

<template>
  <div v-for="task in tasks" :key="task.id">
    <div @click="deleteTask(task.id)">Delete task</div>
    <div>
      <h2>{{task.title}}</h2>
      <p>{{task.description}}</p>
    </div>
  </div>
  <form>
    <div>
      <label for="title">Title</label>
      <input id="title" v-model="form.title" type="text">
    </div>
    <div>
      <label for="description">Description</label>
      <textarea id="description" v-model="form.description" rows="5"></textarea>
    </div>
    <button @click="createTask">TODO追加</button>
  </form>
</template>

** サンプルコードから省略してあります。

ローカル動作確認

1. APIを実行

github.com

をクローンしてきて、

$ docker-compose up

2. 画面を実行

$ npm run dev

3. アクセス

http://localhost:3000 にブラウザでアクセスして動作確認

サンプルコード

github.com