前回同様にVue.jsのチュートリアルに従って
Todoリスト作成をします。
今回は、算出プロパティを使って、トグル機能を追加します。
各 TODO オブジェクトに done プロパティを追加する。
追加前
const todos = ref([
{ id: id++, text: 'Learn HTML' },
{ id: id++, text: 'Learn JavaScript' },
{ id: id++, text: 'Learn Vue' },
]);
function addTodo() {
todos.value.push({ id: id++, text: newTodo.value });
newTodo.value = '';
}
追加後
const todos = ref([
{ id: id++, text: 'Learn HTML', done: true },
{ id: id++, text: 'Learn JavaScript', done: true },
{ id: id++, text: 'Learn Vue', done: false }
])
function addTodo() {
todos.value.push({ id: id++, text: newTodo.value, done: false })
newTodo.value = ''
}
チェックボックスで、doneのon/offをするために v-model を使う。
done プロパティがtrueになったら、スタイル適用して打消し線を入れるようにする。
変更前
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
<button @click="removeTodo(todo)">X</button>
</li>
checkbox追加して、テキストにスタイルを付ける。
変更後
<li v-for="todo in todos" :key="todo.id">
<input type="checkbox" v-model="todo.done">
<span :class="{ done: todo.done }">{{ todo.text }}</span>
<button @click="removeTodo(todo)">X</button>
</li>
変更後style
<style>
.done {
text-decoration: line-through;
}
</style>
すでに完了した Todo を隠せるようにする
まず、このボタンを用意する。
<button @click="hideCompleted = !hideCompleted">
{{ hideCompleted ? 'Show all' : 'Hide completed' }}
</button>
computed()（算出プロパティ） を使う。
算出プロパティを使うと、
依存関係が変更されると自動的に更新されます。
とのこと。
- refのほかに、computed を import する。
-
const hideCompletedを宣言しておく。
import { ref, computed } from 'vue'
const hideCompleted = ref(false)
const todos = ref([
/* ... */
])
const filteredTodos = computed(() => {
// `todos.value` と `hideCompleted.value` に基づいて
// フィルターされた TODO を返却する
})
filteredTodosの解答が、以下。
const filteredTodos = computed(() => {
return hideCompleted.value
? todos.value.filter((t) => !t.done)
: todos.value
})
- hideCompleted.value がfalse なら、todosリスト全部表示する。
- hideCompleted.value がtrue なら、todoリストの中の doneでない（!t.done）もののみ表示する。
宣言した、filteredTodos は、どこで使うのかと思ったら、
v-for文で、todoリストを表示している部分を、変更する。
変更前
<li v-for="todo in todos" :key="todo.id">
変更後
<li v-for="todo in filteredTodos" :key="todo.id">
stackblitz で書いた。
stackblitzのリンク：
初期状態にddddだけ追加した状況。
チェックボックスをクリックすると、打消し線が入る。タスク完了という意味。done が trueになった。
Hide completed ボタンをクリックすると、打ち消したもの(完了済みのもの)だけが、非表示になる。
Show all ボタンをクリックすると、また全部が表示される。
Xボタンを押したら、タスクそのものが削除されるので、全体表示しても出てこなくなる。
以下は、dddd と、Learn JavaScript を削除した状況。
