質問編集履歴

1 誤字修正

rinchamamemo

rinchamamemo score 12

2018/04/10 21:05  投稿

slugに応じたコンテンツを表示する際のエラー/リロード又はURL直打ちでエラー
実現したいこと
---
slugの値に応じたコンテンツを表示を実現するため、発生している問題を解決したい。
発生している問題
---
index.vue(=localhost:3000)にアクセスし、/contents/abcdeのリンクをクリックすると、コンテンツが正常に表示されます。正常に表示されるというのは、_slug.vueの{{ filteredData.title }}がbbbbbbbbbbと表示されるということを意味します。
しかしながら、URLを直に打つか、リロードすると"Cannot read property '0' of undefined"というエラーになります。
URLを直に打つか、リロードしても正常に表示されるようにしたいです。
前提
---
<ファイル構成>
```
pages/
--| contents/
-----| _slug.vue
index.vue
static/
--| data.json
```
<取得するデータについて>
static/data.json
```JSON
[
   { 
   "title": "bbbbbbbbbb",
   "name": "aaaaaaaa",
       "slug": "abcde"
   },
   { 
   "title": "cccccccccc",
   "name": "dddddddddd",
       "slug": "fghijk"
   }
]
```
コード
---
_slug.vue
```
<template>
   <div>
       {{ filteredData.title }}
   </div>
</template>
<script>
import mydata from '~/static/data.json'
export default {
   
   data () {
       return {
           mydata: mydata   
       }
       
   },
   computed: {
       filteredData: function () {
            if (process.browser) {
             
               var url = window.location.protocol+ '//' + window.location.host + ‘/contents/‘
               var matchData = this.mydata.filter(function(item, index){
                   if (item.slug === window.location.href.replace(url, '')) return true;
               })
           }
           return matchData[0]
       }
       
   }
}
</script>
```
index.vue
```ここに言語を入力
<template>
<div>
 <b-button type="button" to=“/contents/abcde”>View</b-button>
 <b-button type="button" to=“/contents/fghijk”>View</b-button>
</div>
</template>
<script></script>
```
  • Nuxt.js

    679 questions

    Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る