【Vue】間の悪い非同期処理と付き合う - Qiita

はじめに 以前、自分が書いたVueのコードで奇妙な現象を目の当たりにしました。 ブラウザバックを高速連打すると、連打した分だけデータが追加されるような現象です。 個人的に結構衝撃的で、vueの特性やテストの方法が甘かったと痛感する出来事だったので記事としてまとめようと思います。 問題となった事象 実際のコードは載せられないので、それっぽい事象が起こるサンプルを用意しました。 検索画面を想定しており one→two→three の順番で検索し、 通信環境の良くない状態で、ブラウザバックを連打すると連打した回数分データがアイテムリストに追加されます😰 検索用コンポーネント <template> <div class="about"> <h1>This is an about page</h1> <div> <div> <input type="text" v-model="searchQue