Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8578

Vue.jsでTODOTrello風アプリを作る

$
0
0

業務でTrelloをよく使うので、Vue.jsを使って同じようなTODOアプリ作れないかなーと思い作成。
部分的に、気になるところを抽出して説明していきたいと思います。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><linkrel="stylesheet"href="reset.css"><linkrel="stylesheet"href="style.css"></head><body><divid="app"><divclass="container"><divclass="flexitem item1"><h1>未着手</h1></div><divclass="flexitem item2"><h1>進行中</h1></div><divclass="flexitem item3"><h1>TODOリスト</h1></div><divclass="flexitem item4"><h1>確認待ち</h1></div><divclass="flexitem item5"><h1>完了</h1></div></div></div></body></html>

image.png

ベースはhtmlとcss(flexbox)で作りました。ここに、Vue.jsを使ってTODOリストを作成していきます。

<body><divid="app"><p><inputtype="text"placeholder="TODOを入力してください"v-model="newitemtitle"><buttonv-on:click="addbutton">add</button></p><ul><liv-for="(item,index) in items"><label><labelv-bind:class="{ done: item.ischecked }"><inputtype="checkbox"v-model="item.ischecked"> {{ item.title }} 
                 <buttonv-on:click="deletebutton(index)">delete</button></label></li></ul></div></body>
letvm=newVue({el:'#app',data:{items:[],newitemtitle:'',id:0},methods:{addbutton:function(){if(this.newitemtitle==='')return;this.items.push({title:this.newitemtitle,ischecked:false,id:this.id++});this.newitemtitle=''},deletebutton:function(index){if(confirm('本当に削除しますか?')){this.items.splice(index,1)}}}})
<p><inputtype="text"placeholder="TODOを入力してください"v-model="newitemtitle">

で、テキストボックス配置。v-modelで、vueインスタンスのdataオプションの、newitemtitleと紐づけます。
htmlのnewitemtitleに変更があれば、紐づいているjsのnewitemtitleの値も更新されます。
newitemtitle=' 'とすることによって、空の状態でテキストボックスを作成できます。

<buttonv-on:click="addbutton">add</button></p>

で、v-on:clickディレクティブを使い、addボタンをクリックしたときに、addbuttonメソッドが呼ばれます。
下記のメソッドです。

addbutton:function(){if(this.newitemtitle==='')return;this.items.push({title:this.newitemtitle,ischecked:false,id:this.id++});this.newitemtitle=''}

空文字だったらreturnで処理を終了させて、pushメソッドで、配列 items[ ]の中に、テキストボックスで入力した値を追加します。値を追加すると、テキストボックスの中身が空になっていて欲しいので、

this.newitemtitle=''

で、配列に値を追加した後に、テキストボックスの中身を空にします。

ischecked:false

は、

<labelv-bind:class="{ done: item.ischecked }">

と紐づいてくるのですが、ischeckedがtrueだったら、TODOに打ち消し線を引くようにCSSで調整してます。

.done{text-decoration:line-through;}
<liv-for="(item,index) in items"v-bind:key="item.id">
v-bind:key="item.id

配列内のデータを繰り返し表示するのに、なぜv-bind:key="item.idが必要なのか....
調べたところによると、ただ表示する分にはkeyを与えなくてもいいが、要素の追加や削除、順序変更などがある場合は、要素が意図しない動きをしてしまうため らしいです。今回のTODOアプリはもろ当てはまってます(汗)
各要素ごとに、一意のkeyを設定してあげることにより正しく表示できる、ということですね。

image.png

一旦はそれっぽく表示できました。TODOリスト内の要素を、「進行中」や、「完了」へとドラッグ&ドロップで移動できるようにするため、Vue.Draggableというライブラリを使いました。
今回はCDNを使いました。

<liv-for="(item,index) in items"v-bind:key="item.id">

を、

<draggabletag="ul"v-bind:options="{group:'ITEMS'}"><liv-for="(item,index) in items"v-bind:key="item.id"></draggable>

このように囲ってあげると、リスト内で要素の順序変更が行えるようになります。
https://i.gyazo.com/1d49eb621ce87037b510cdb4649d4329.mp4

これ見た目だけは動いてるように見えるけど、データの保存とかどうすんだこれ・・・・


参考にさせていただいた記事
Vue.jsでドラッグ&ドロップするなら「Vue.Draggable」がおすすめ
Vue.js: v-forで項目インデックスをkey属性にしていいのか


Viewing all articles
Browse latest Browse all 8578

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>