500エラーがでた場合、Vue.jsでエラー画像を描画したい(axios利用)

Question

前提・実現したいこと

Vue.jsで検索機能を作成しています。
ステータスコードが５００系の時に、「読み込みに失敗しました」等を描画するのにつまづいております。

発生している問題・エラーメッセージ

Vue.jsの実装に悩んでおります。
現状axiosを利用し、２００系以外はステータスコードを吐く仕組みは、なんとか調べてできた段階です。
問題点は主に２点あると考えています。

methods:に書く適切な形が正しくないと思われる。

template内のv-if="xxxx"にどのように繋げれば、描画することができるのか不明。

methods:で200以外のステータスコードを着火とすれば、
v-ifで描画に繋げることができるのではないか
と考え試しておりますが、適切な実装手段がみえていない状態です。

該当のソースコード

search.vueの一部抜粋
npmからaxiosをインストール済みです。

<template>
  <div class="SearchResults">
    <div class="text-center mb-5 pb-5" v-if=" ">
      <figure><img src="./hoge.png"></figure>
      <h1>読み込みに失敗しました</h1>
      <p><a href="#">再読み込み</a></p>
    </div>
  </div>
</template>



<script>
const axios = require('axios');

export default {
  methods: {
    //200以外はエラー
    SearchError () {
      axios.get('https://hoge/fuga').catch(function (error) {
        if (error.response) {
            console.log(error.response.status);
        }
      });
    }
  }
}
</script>

試したこと

多くのサイトを参考にし、試行錯誤しましたがうまく描画されませんでした。
axiosを利用するだろうと推測し、ここまで進みましたが詰まってしまいました。
私の実力不足で理解が及ばす、的はずれな書き方をしていると思いますが、
どうぞお力をお貸していただければと思います。

主に参考にしたサイト
https://www.yoheim.net/blog.php?q=20170801
https://qiita.com/kimullaa/items/6e7bcc3779c32a383826
https://qiita.com/shisama/items/61cdcc09dc69fd8d3127

Comments

[_Victorique__]

具体的に実現したいことに対する現状を教えてください。

[anusama]

質問、ありがとうございます!!

webpackを利用しており、トランスパイルは問題なくできております。
しかし、エラーの描画ができておりません。
現状、記載した主問題と思われる２点に詰まっております。

`v-if`は、メソッドの200以外のステータスコードを着火とすれば、
描画に繋げることができるのではないか
と考え試しておりますが、適切な実装手段がみえていない状態です。

[_Victorique__]

疑問なのですが、axiosを実行するタイミングはいつでしょうか？

[anusama]

検索を行い、読み込むタイミングを考えております。
すいません、ソースコードの追記を行います。
抜粋が過ぎました。

[_Victorique__]

searchErrorとthis.bus.$emit('loadMore')の違いは何でしょうか？
何故２回axiosしているのでしょうか？this.bus.$emit('loadMore')がaxiosしているかは分からないですが。

[anusama]

Victorique様
返事が遅くなり申し訳ございません。
ご質問ありがとうございます！
axiosはしておりません。

おかげさまで、解決への道筋をある程度掴むことができました。
解決次第、コードをこちらに載せる予定です。
お時間をいただき、ありがとうございました！

Answer 1

1. data(){}に変数を追加して
2. v-ifにその変数名を記入
3. その変数のtrue,falseを切り替えれば表示・非表示を切り替えることができます。

※このコードは動作未検証です。

<div class="text-center mb-5 pb-5" v-if="hasError500">

...


<script>
data () {
  return {
    loading: false,
    completed: false,
    listings: [],
    listingStatusTexts: [],
    hasError500: false,
  }
},


SearchError () {
  axios.get('https://ancar.senna/cars/search').catch(function (error) {
    if (error.response) {
      if (error.response.status == 500 ||
          error.response.status == 502 ||
          error.response.status == 503) {
        this.hasError500 = true
      }
    }
  });
}
</script>

Comments

[anusama]

KaiShoya様

返事が遅くなり申し訳ございません。
ご回答、ありがとうございます。

残念ながら当コードでは期待する動作はしませんでした。
ただ、おかげさまでヒントを得ることができ、解決への道筋がなんとかたちました。
解決次第、コードをこちらに載せる予定です。