ElectronとVue.jsで作るTodoアプリに完了済みマークを付ける

完了済みのチェックを付ける(Electron+Vue.jsで作るTodoアプリ)

Electron

ElectronとVue.jsで作るTodoアプリに、タスクの完了を表すチェックマークを付けてみます。Todoアプリとして、完了したかしていないかの見分けがつくことは必須の要件です。Vue.jsでチェックマークのUIを使ってみます。

2020.10.02 2020.04.06

はじめに
リストの列を増やす
完了済みにする処理を書く
チェックされたことを確認できるようにする
今回はここまで

はじめに

Electron+Vue.jsでTodoアプリで入力された内容をズラズラっと表示するだけのTodoアプリを作りました。でもこれでは完了か未完了かが分からず、Todoリストとしての体裁を成していません。

今回は、チェックを付けられるようにして完了済みか未完了かを区別できるようにしてみます。

マイペースでやらないと頭が追いつかんのですよ。

リストの列を増やす

今はリスト上にはタスクを表示するための列が1つだけ存在する状態です。
ここにリストにチェックをするための列を追加します。

// すでに存在するel-table-columnタグの前に入れる
<el-table-column label="button" width="50">
    <el-button size="mini" icon="el-icon-check">
    </el-button>
</el-table-column>

これで見かけ上はTodoリストっぽくなりました。

完了済みにする処理を書く

ここですること

続いて、完了済みのチェックをクリックしたときの処理を書いていきます。

scriptのmethodsを修正します。
ここですることは、

各タスクに完了/未完了の情報を持たせる
タスク完了の処理を書く

の2点です。

各タスクに完了/未完了の情報を持たせる

タスクを追加するときに、フラグを持たせてしまいましょう。

insertTask () {
    this.taskList.push({task: this.input, isComplete: false})
}

配列taskListに保存するJSONデータにisCompleteフィールドを追加しました。これがfalseならば未完了、trueなら完了です。

タスク完了の処理を書く

先ほど追加したisCompleteフィールドの値をtrueにする処理を書いていきます。

completeTask (targetTask) {
    this.taskList[targetTask].isComplete = true
}

どのタスクを完了にするかを判別するために引数targetTaskを渡しています。そして、その引数に該当するデータのisCompleteをtrueにします。

今は配列とリスト表示の順序が一致しているので、実際に渡されるものはチェックがクリックされたリストの行数にしましょうかね。
ソートや絞り込みなどを行うならば、この方法は利用できません。別途タスクID等で完了済みにしたいタスクの特定を行う必要があります。

処理を書いたので、チェックをクリックしたときに呼び出されるようにしましょう。

<el-table-column label="button" width="50">
    <template slot-scope="record">
        <el-button size="mini" icon="el-icon-check" circle @click="completeTask(record.$index)">
        </el-button>
    </template>
</el-table-column>

@clickでさっき作ったメソッドを呼び出しています。

引数にはクリックされた行の行数を渡しています。$indexで行数を渡すことができます。また、行を特定するには<template slot-scope="record">で可能です。

チェックされたことを確認できるようにする

はい。
例によって例のごとく、内々で処理が終わってしまうので、見た目が全く変わりません。これでは、本当に処理ができているのかがさっぱりわかりません。
実行時のコンソールでエラーが出ていないので、おそらく大丈夫でしょうレベル。

目で見て確認できるようにするため、タスク名に取り消し線でも付けてみましょう。

styleにCSSを書いておきます。

.complete {
    text-decoration: line-through;
}
.incomplete {
}

そして、各タスクのisCompleteの値に応じてCSSを適用しましょう。

<el-table-column prop="task" label="task" width=auto>
    <template slot-scope="record">
        <span :class="[record.row.isComplete === true ? 'complete' : 'incomplete']">
            {{ record.row.task }}
        </span>
    </template>
</el-table-column>

値を参照して表示するには{{ }}で囲みます。
ここでは、配列taskListの中身を順次リスト表示したものからtaskフィールドの値を表示しています。

また、isCompleteフィールドの値を参照し、trueならばCSSのcompleteを適用するようにしています。
falseのときはincompleteです。
タスク追加したときに取り消し線が入るとダメですからね。
対で入れています。

取り消し線は出るかな？