Railsの処理が失敗した時に失敗JSONを返すことでVue.jsの処理を分岐させる

非遷移でVue.jsとRailsがやり取りするにあたって、失敗時の処理を分岐させる方法です。

以下のような形で実装しました。

①Rails内の処理が成功したか失敗したかを、それぞれ別のJSONを返すことで判定
②Vue.jsでは、返ってきたJSONによって成否を判断して処理を分岐させる

Rails側の処理

def new
  #Vueからレース名を受け取って
  race_name = params[:race_name]

  #(race_nameを元にデータの取得処理を実行）

  #成否によって別のJSONを返す
  成功した場合
    render 'new', formats: 'json', handlers: 'jbuilder' 
  失敗した場合 
    render 'fail', formats: 'json', handlers: 'jbuilder' 

end

html

<div id="modal">
  <div class="modal-header">
      <input v-model="raceName" placeholder="レース名を入力">
      <button @click="scrapingData(scrJudge)">取得</button>  
  </div>
  
  <div class="modal-body">
      {{ failMsg }}
      {{ raceConfirmation }}
      {{ recordsConfirmation }} 
  </div>
       
</div>

「取得」ボタンクリックでscrapingData(scrJudge)メソッドが実行されます。コールバックになっています。


Vue.js

new Vue({
  el:  '#modal',
  data:  {
    raceName: " ",  //inputと連動
    failMsg: " ",  //失敗時のメッセージ
    raceConfirmation: " ",
    recordsConfirmation: " "
  },

  methods: {
      scrapingData(callback){        
          this.failMsg = "";  //取得ボタンを押した時点で初期化する

          let race_name = this.raceName;
          axios.get(`/api/keiba_db/get_race_records/new/${race_name}`) //Railsに処理（データの取得）を依頼
            .then(res => {     //返ってきたデータを
                callback(res);  //コールバック（scrJudge）の引数に指定
             });
        },
    scrJudge(res){   
        if(res.data.result ==="fail"){ //失敗時のJSONが返ってきた場合
            this.failMessage = "レースが見つかりませんでした ";
        }else{ //成功時のJSONが帰ってきた場合
            this.failMessage = ""; //初期化する
            this.raceConfirmation = res.data.race; //成功時のJSONから値を受け取る
            this.recordsConfirmation = res.data.records; //同上      
        }}     
    }
)}

成功した場合、modal-bodyに{{ raceConfirmation }}と{{ recordsConfirmation }}が表示されます。 失敗した場合 、{{ failMsg }}が表示されます

  <div class="modal-body">
      {{ failMsg }}
      {{ raceConfirmation }}
      {{ recordsConfirmation }} 
  </div>