最終更新日から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>
