2.1.10Vue.jsのデータを書き替えると、新たな内容で表示が改められます。定めた条件にしたがって、データを削除してみます。項目を調べてデータから削除する」に改訂しました。項目を数えて表示する」でつくったコード001に手を加えてゆきましょう。アプリケーションに納めた複数のデータがリストとして示され、入力フィールドのテキストは「追加」ボタンで項目に加えられます。項目すべてとチェックのついていない数も、それぞれ示されています(図001)。図001■全項目数と残りの数が示されるチェック済みの項目は、まとめて除けるようにしましょう。クリックする<button>要素を、つぎのように加えます(図002)。v-on:clickディレクティブから呼び出す関数(archive())はつぎの項で定めます。条件にしたがってデータを除くボタンから呼び出されるのは、methodsプロパティに加えたつぎのメソッド(archive())です。チェックをつけた項目は、データのプロパティ(done)の値がtrueになります。そこで、データ(todo)の中からチェックのついていない項目を配列に取り出し、もとのデータに上書きしました。remains;}},});これで、ボタンを押すとチェック済みの項目はデータから除かれ、画面にはチェックされていない項目だけが残ります(図003)。HTMLとJavaScriptの記述は、以下のコード001にまとめました。併せて、コードを試すためのサンプル001もその下に掲げてあります。6準拠のコード002に改めました。6の構文で書いてみます。6の構文を使う」参照)。btn-xs">断捨離</button></p></div>つぎに、JavaScriptコードです。function」を省きます。6の構文を使う」参照)。つぎのように、項目リストのデータ(todos)配列から条件に合った項目の新たな配列をつくって、データに上書きします。Array.filter()メソッドの引数は、アロー関数式=>で与えました。6の構文に改めたのが、つぎのコード002です。動きが確かめられるように、以下のサンプル002をjsdo.itに掲げました。6の構文を使う」を追加。