トップに関する質問 500エラーがでた場合、Vue.jsでエラー画像を描画したい(axios利用)

編集履歴

質問編集履歴

ソースコード

2019/04/01 05:20

投稿

anusama

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -60,36 +60,6 @@
   <div class="SearchResults">
-　　<div class="text-center mt-5 pt-5" v-if="!loading && completed && listings.length === 0">
-      <h1>お探しモノは見つかりませんでした</h1>
-    </div>
-　　<div id="searchList">
-      <article v-for="listing in listings" :key="listing.id">
-        <figure class="tmbPic">
-          <a :href="'/pens/' + listing.id" target="_blank">
-            <img :src="topImage(listing)" alt="">
-          </a>
-        </figure>
-      </article>
-    </div>
     <div class="text-center mb-5 pb-5" v-if=" ">
       <figure><img src="./hoge.png"></figure>
@@ -112,167 +82,19 @@
 <script>
-import $ from 'jquery'
 const axios = require('axios');
 export default {
-  props: {
-    'bus': {
-      type: Object,
-      default: null
-    }
-  },
-  data () {
-    return {
-      loading: false,
-      completed: false,
-      listings: [],
-      listingStatusTexts: []
-    }
-  },
-  mounted () {
-    this.bus.$on('submit', this.onSubmit.bind(this))
-    this.bus.$on('fetched', this.onFetched.bind(this))
-    this.bus.$on('fetchedLoadMore', this.onFetchedLoadMore.bind(this))
-    $(document.body).on('scroll.loadMore', this.handleScroll)
-  },
-  destroyed () {
-    $(document.body).off('scroll.loadMore')
-  },
   methods: {
-    handleScroll (e) {
-      if ((e.target.scrollTop + e.target.offsetHeight) >= (e.target.scrollHeight - 100)) {
-        this.loadMore()
-      }
-    },
-    onSubmit () {
-      this.loading = true
-      this.listings = []
-    },
-    onFetched (results) {
-      this.loading = false
-      const newListings = results.result || results.listings
-      this.listings = newListings
-      this.completed = newListings.length < 30
-      this.listingStatusTexts = results.listing_status_texts
-    },
-    onFetchedLoadMore (results) {
-      this.loading = false
-      const newListings = results.result || results.listings
-      this.listings.push(...newListings)
-      this.completed = newListings.length < 30
-      this.listingStatusTexts = results.listing_status_texts
-    },
-    topImage (listing) {
-      if (listing.images.length === 0) {
-        return './hoge.jpg'
-      }
-      return listing.images[0].user_image.url
-    },
-    loadMore () {
-      if (!this.completed && !this.loading) {
-        this.loading = true
-        this.bus.$emit('loadMore')
-      }
-    },
-    statusLabel (status) {
-      return this.listingStatusTexts[status] || status
-    },
     //200以外はエラー
     SearchError () {
-      axios.get('https://hoge/search').catch(function (error) {
+      axios.get('https://hoge/fuga').catch(function (error) {
         if (error.response) {
@@ -283,8 +105,6 @@
       });
     }
   }

ソースコード

2019/04/01 05:20

投稿

anusama

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -272,7 +272,7 @@
     SearchError () {
-      axios.get('https://ancar.senna/cars/search').catch(function (error) {
+      axios.get('https://hoge/search').catch(function (error) {
         if (error.response) {

ソースコード

2019/03/29 09:24

投稿

anusama

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -60,6 +60,36 @@
   <div class="SearchResults">
+　　<div class="text-center mt-5 pt-5" v-if="!loading && completed && listings.length === 0">
+      <h1>お探しモノは見つかりませんでした</h1>
+    </div>
+　　<div id="searchList">
+      <article v-for="listing in listings" :key="listing.id">
+        <figure class="tmbPic">
+          <a :href="'/pens/' + listing.id" target="_blank">
+            <img :src="topImage(listing)" alt="">
+          </a>
+        </figure>
+      </article>
+    </div>
     <div class="text-center mb-5 pb-5" v-if=" ">
       <figure><img src="./hoge.png"></figure>
@@ -76,21 +106,173 @@
 <script>
+import $ from 'jquery'
 const axios = require('axios');
 export default {
+  props: {
+    'bus': {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      completed: false,
+      listings: [],
+      listingStatusTexts: []
+    }
+  },
+  mounted () {
+    this.bus.$on('submit', this.onSubmit.bind(this))
+    this.bus.$on('fetched', this.onFetched.bind(this))
+    this.bus.$on('fetchedLoadMore', this.onFetchedLoadMore.bind(this))
+    $(document.body).on('scroll.loadMore', this.handleScroll)
+  },
+  destroyed () {
+    $(document.body).off('scroll.loadMore')
+  },
   methods: {
+    handleScroll (e) {
+      if ((e.target.scrollTop + e.target.offsetHeight) >= (e.target.scrollHeight - 100)) {
+        this.loadMore()
+      }
+    },
+    onSubmit () {
+      this.loading = true
+      this.listings = []
+    },
+    onFetched (results) {
+      this.loading = false
+      const newListings = results.result || results.listings
+      this.listings = newListings
+      this.completed = newListings.length < 30
+      this.listingStatusTexts = results.listing_status_texts
+    },
+    onFetchedLoadMore (results) {
+      this.loading = false
+      const newListings = results.result || results.listings
+      this.listings.push(...newListings)
+      this.completed = newListings.length < 30
+      this.listingStatusTexts = results.listing_status_texts
+    },
+    topImage (listing) {
+      if (listing.images.length === 0) {
+        return './hoge.jpg'
+      }
+      return listing.images[0].user_image.url
+    },
+    loadMore () {
+      if (!this.completed && !this.loading) {
+        this.loading = true
+        this.bus.$emit('loadMore')
+      }
+    },
+    statusLabel (status) {
+      return this.listingStatusTexts[status] || status
+    },
     //200以外はエラー
     SearchError () {
-      axios.get('https://hoge/search').catch(function (error) {
+      axios.get('https://ancar.senna/cars/search').catch(function (error) {
         if (error.response) {
@@ -102,6 +284,8 @@
     }
   }
 }

文章変更

2019/03/28 14:47

投稿

anusama

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -35,6 +35,14 @@
 2.
 `template`内の`v-if="xxxx"`にどのように繋げれば、描画することができるのか不明。
+`methods:`で200以外のステータスコードを着火とすれば、
+`v-if`で描画に繋げることができるのではないか
+と考え試しておりますが、適切な実装手段がみえていない状態です。

タイトル変更

2019/03/28 14:22

投稿

anusama

スコア13

test CHANGED Viewed

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

test CHANGED Viewed

File without changes

参考の明瞭化

2019/03/28 13:39

投稿

anusama

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -114,4 +114,16 @@
 `axios`を利用するだろうと推測し、ここまで進みましたが詰まってしまいました。
-私の実力不足で理解が及ばす、的はずれな書き方をしていると思いますが、どうぞお力をお貸していただければと思います。
+私の実力不足で理解が及ばす、的はずれな書き方をしていると思いますが、
+どうぞお力をお貸していただければと思います。
+主に参考にしたサイト
+https://www.yoheim.net/blog.php?q=20170801
+https://qiita.com/kimullaa/items/6e7bcc3779c32a383826
+https://qiita.com/shisama/items/61cdcc09dc69fd8d3127

文章変更

2019/03/28 13:35

投稿

anusama

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -16,7 +16,7 @@
 現状`axios`を利用し、２００系以外はステータスコードを吐く仕組みは、なんとか調べてできた段階です。
-問題点は主に２点です。
+問題点は主に２点あると考えています。