

## 実現したいこと

slugの値に応じたコンテンツを表示を実現するため、発生している問題を解決したい。

## 発生している問題

index.vue（＝localhost:3000）にアクセスし、/contents/abcdeのリンクをクリックすると、コンテンツが正常に表示されます。正常に表示されるというのは、_slug.vueの{{
filteredData.title }}がbbbbbbbbbbと表示されるということを意味します。

しかしながら、URLを直に打つか、リロードすると"Cannot read property '0' of undefined"というエラーになります。

URLを直に打つか、リロードしても正常に表示されるようにしたいです。

## 前提

＜ファイル構成＞

[code]

    pages/
    --| contents/
    -----| _slug.vue
    index.vue
    static/
    --| data.json
    
[/code]

＜取得するデータについて＞

static/data.json

[code]

     [
        {   
        "title": "bbbbbbbbbb",
        "name": "aaaaaaaa",
            "slug": "abcde"
        },
        {   
        "title": "cccccccccc",
        "name": "dddddddddd",
            "slug": "fghijk"
        }
    ]
    
[/code]

## コード

_slug.vue

[code]

    <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>
    
[/code]

index.vue

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2018-04-10T12:03:30.977
43132
2018-11-22T04:00:55.783
2018-04-10T13:53:17.943
28104
28104
question
javascript nuxt.js
Nuxt.jsでslugに応じたコンテンツを表示する際のエラー／リロード又はURL直打ちでエラー


slugというかパラメーターは  
$route.params.  
で取得できますよ。

バリデーションかける場合は[この様に](https://qiita.com/usk81/items/9d98a337b6ef86b90404#%E4%BB%96%E3%81%AE%E4%BA%BA%E3%81%AF%E3%81%A9%E3%81%86%E6%9B%B8%E3%81%84%E3%81%A6%E3%82%8B%E3%81%AE%E3%81%8B%E8%A6%8B%E3%81%A6%E3%81%BF%E3%81%9F)するようです。

基本、外部データの読み込みはasyncDataでaxiosなりを使って  
読みこむのが良いのかと思います。


CC BY-SA 4.0
2018-11-22T04:00:55.783
50527
2018-11-22T04:00:55.783
31103
43132
answer