トップ > Vue.js > Vue.jsでToDoアプリ作って詰まったとこ

Vue.jsでToDoアプリ作って詰まったとこ

Vue.js

checkboxのboolean問題

個人的にHTMLでCheckBoxを使用するときの扱い方は下記のようにしていた

//check済みで表示するとき
<input type=“checkbox” checked=true>

なのでVueもそのように考えて下記のようにしたらfalse値のまま変化がなかった。。

<ul>
    //todo.isDoneは真偽値が返る（初期値はfalse）
    <li><input type=“checkbox” v-model:checked=“todo.isDone"><span>{{todo.item}}</span></li>
</ul>

f:id:makoo5:20190914145547p:plain

f:id:makoo5:20190914145607p:plain

公式にはこのように記載されていた

form の input 要素 や textarea 要素、 select 要素に双方向 (two-way) データバインディングを作成するには、v-model ディレクティブを使用することができます。

v-model は任意の form 要素にある value、checked または selected 属性の初期値を無視します

なるほど。。（さっさと公式見るべきだった）

動的なclass属性の扱い方

結論、trueになると{done:todo.isDone}のdoneがclassの値になりスタイルが適応できる

HTML

<span v-bind:class="{done:todo.isDone}">{{todo.item}}</span>

CSS

span.done{
    text-decoration: line-through;
}