データ削除後の表示を非遷移で更新する

シングルページアプリケーションなのでデータの削除時も非遷移で表示が変更されなければいけません。
しかし、Vueのメソッド内で


・axiosでdeleteリクエストを送信
・データ取得メソッドを実行


とそのまま記述しても

①axiosでdeleteリクエストを送信
②データ取得メソッドを実行
③ActiveRecordによって削除クエリが実行

という順番で進行してしまい、削除完了後のデータを再取得することができませんでした。



これをRailsで削除処理終了後にJSONを返して、VueでそのJSONを受け取った後にデータ取得メソッドを実行させることで解決しました。

html

<button class="header-btn" v-on:click="raceDestroy()">選択したレースを削除</button>

Rails側(変更前)

  def destroy
    race = Race.find(params[:race_id]) #VueからレースのIDを受け取って
    race.destroy   #削除する
    render body: nil
  end

Rails側(変更後)

  def destroy
    race = Race.find(params[:race_id]) #VueからレースのIDを受け取って
    race.destroy   #削除する
    
    @msg = "destroyed"  #何でもいいからJSONを返す
    render 'destroy', formats: 'json', handlers: 'jbuilder'
  end

JSONの中身は何でもいい

json.msg @msg

Vue.js(変更前)

    raceDestroy(){
      let race_id = this.activeRaceId; //選択中のレースのIDを代入
      axios.delete(`/api/keiba_db/destroy/${race_id}`) //Railsに処理を依頼
    
      this.getRacesIndex(); //レース一覧を取得
      this.getRecordsIndex(); //レコード一覧を取得
      },

Vue.js(変更後)

    raceDestroy(){
      let race_id = this.activeRaceId;
      axios.delete(`/api/keiba_db/destroy/${race_id}`)
        .then(res => {
          this.getRacesIndex();
          this.getRecordsIndex();
        });
      },

「解決しました(ｷﾘｯ」とか書いてるけど、これはもっと上手いやり方があると思う。
じゃないとSPAにおいて無駄JSONが大量生産されることになるからなあ