はじめに

Nuxt.js でウェブアプリを作成している。

複数のリストを Firebase の Realtime Database に保存するというもの。

v-for を用い、リアクティブに配列に要素を追加し、最後にまるっとデーターベースに保存する。

問題発生

データーベースに保存するためにsibmit をすると、当然データベースに保存はされているが、配列にはデータが残ったままなので、保存後もリストが表示され続ける。

そこで、submit をクリックした瞬間にel.length = 0; で配列のデータを空にする処理をした。

再度、実行。

が、依然、リストは表示され続ける。

念のためコンソールで確認すると配列は空になっている。

つまり、Nuxt.js 側で配列の削除をリアクティブに反応できていないことが分かった。

結論から言うとただそれだけ。

つまり配列を空にする処理を別の書き方にすればOK。

todos.splice(0) で同一処理をすることでリアクティブに反応してくれるようになった。