Vue CLIとVuetifyでTODOリストを作る方法の解説

Vue CLIとVuetifyでTODOリストを作る方法の解説
                 
最終更新日から90日以上経過しています。

以前Vue.jsでTODOリストを作ったのですが、UI部分は改善の余地がありました。少し調べると、Vue.js向けのマテリアルデザインフレームワークVuetifyというものが見つかったので、こちらを導入してみます。

読み方はヴューティファイで良いのでしょうか。公式サイトも恐らくVuetifyで作られていると推測されますが、スッキリしたデザインでとても好きな感じです。

というわけでVue CLIを使用して、Vue.js + VuetifyでTODOリストを作るまでの解説していきます。参考になれば。

前回Vue.jsでTODOリストを作った時のの記事はこちら

完成形

最終的には以下の形になります。タスク名、作業者を入力し、どちらかが未入力の場合、エラーとする。削除も実装。

手順

Vuetifyの導入

Vue CLIがインストールされている前提で、Vuetifyのインストールは以下のコマンドのみで可能です。

vue create <プロジェクト名>
cd <プロジェクト名>
vue add vuetify

基本的に公式によるクイックスタートを見れば躓く事はないでしょう。

TODOリスト作成

TodoList.vue

TODOリスト部分を描画するコンポーネントを作成します。タスク一覧部分はv-data-tableコンポーネントを使用しています。公式に幾つかサンプルが載せられているので、好みにいじった形。

<template>
    <v-container
      text-center
      wrap
      md12
    >
      <v-card
        class="mx-auto"
        outlined
        max-width="1200"
      >
        <v-card-title>
          <v-text-field
            placeholder="追加する作業を入力してください"
            v-model="task"
          ></v-text-field>
          <v-select
            :items="assignees"
            label="担当者を選択してください"
            solo
            class="mt-2"
            v-model="assignee"
          ></v-select>
          <v-btn color="primary" dark class="mb-2" @click="addTask()">追加</v-btn>
        </v-card-title>
        <v-data-table
          :headers="headers"
          :items="items"
          :items-per-page="5"
          class="elevation-1"
        >
          <template v-slot:item.control="{ item }">
            <v-btn class="mx-2" fab dark x-small color="error" @click="deleteTask(item)">
              <v-icon dark>mdi-minus</v-icon>
            </v-btn>
          </template>
        </v-data-table>
      </v-card>
    </v-container>
</template>

<script>
export default {
  name: 'TodoList',
  data: () => ({
    headers: [
      {
        text: "作業名",
        sortable: true,
        value: "task",
        width: "70%"
      },
      {
        text: "担当者",
        sortable: true,
        value: "assignee"
      },
      {
        text: "操作",
        sortable: false,
        value: "control"
      },
    ],
    items: [],
    assignees: [
      "担当者A",
      "担当者B",
      "担当者C",
      "担当者D",
      "担当者E",
    ],
    task: "",
    assignee: ""
  }),
  methods: {
    addTask: function() {
      // 未入力エラー
      if (!this.task || !this.assignee) {
        alert("タスク名と作業者を入力してください。");
        return;
      }
      // タスク追加
      this.items.push({
        "task": this.task,
        "assignee": this.assignee,
      });
      // 入力値クリア
      this.task = "";
      this.assignee = "";
    },
    deleteTask: function(item) {
      this.items.splice(this.items.indexOf(item), 1);
    }
  }
};
</script>

App.vue

上記コンポーネントを呼び出す親コンポーネント。基本的に導入時に作成される状態からはほとんどいじっていません。呼び出すコンポーネントを変えたくらいなので、その部分のみ抜粋。

    <v-content>
      <TodoList/>
    </v-content>

JavaScriptカテゴリの最新記事