5/27 Vue.js

自分なりの解釈

computed　dataの値を監視して変化があった場合に処理を実行してリターンで返す

todoリストの処理の流れ

入力欄の値をnewItemとしてv-modelで取得

ボタンクリックで発火　addItem関数処理へ

addItem関数でnewItemを配列に追加　newItemを初期化

配列をv-forで表示

削除ボタンクリックで発火　deleteItem関数にインデックスを引数に渡して処理へ

インデックス番号をもとに配列のデータをspliceで削除

検索欄の入力情報をv-modelで取得

computedで入力情報を監視

配列から入力情報を含むデータだけをfilterとindexOfを使用してリターンする

リターンしたデータをv-forで表示するとリアルタイムで更新される

バリデーショ

エラー用配列をdataに準備しておく

formタグに@submitでvalidateイベント発火

validataイベントでエラー用配列を初期化

if文で弾く場合はエラー用配列にメッセージ追加

エラー用配列の要素数が1以上なら表示するよう設定

エラー用配列をv-forを使用して表示する