簡易to do listの初期画面が上手く機能しない件について(Vue.js）

###質問内容
macのsublime textにおいて簡単なto do listみたいなものを作っています。途中チェックボックスを利用してmain.jsファイルにあるdataのtodosのisDoneがtrueの場合、初期状態でチェックボックスにマークを入れて、falseの場合はそのままという表示にしてCSSで少し文字を変化させるといった感じになります。ただ、最初に設定してあるtodosが何故か全てチェック済みになってしまい、本来は上からチェック、チェック、チェックなしとなるはずですが、なりません。おそらくどこかの設定で全て最初のdataのtodosのisDoneがfalseになってしまっているのだと思いますが、何度見返してみても分かりません。よろしくお願いします。
###写真
本来なるはずの初期画面

現段階の間違った初期画面

コード

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScriptではtrue/falseというBoolean値と"true"/"false"という文字列は異なるものとして扱われます。
そして、文字列は空文字列（""/''）以外はtrueと評価されます。
そのため、<input type="checkbox" v-model="todo.isDone">でtodo.isDoneが"false"の場合もtrueと評価されチェックが入ってしまったのでしょう。

以下のようにすれば解決するはずです。

js
1data: {
2  newItem: "",
3  todos: [{
4    title: "Task 1",
5    isDone: false,
6  }, {
7    title: "Task 2",
8    isDone: false,
9  }, {
10    title: "Task 3",
11    isDone: true,
12  }]
13}