Error/Reloading or Direct URL Error Displaying Content in Nxt.js for Slug

I want to solve the problem I'm experiencing in order to display content according to the value of the slug.

If you go to index.vue (=localhost:3000) and click the /contents/abcde link, the content will be displayed successfully, meaning that {{filteredData.title}} in _slug.vue will be displayed as bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

However, if you type the URL directly or reload it, you get the error "Cannot read property '0' of undefined".

I'd like to type the URL directly or reload it so that it can be displayed normally.

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

static/data.json

[
    {   
    title: "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    "name": "aaaaaaaaa",
        "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(){ 
        US>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>

javascript nuxt.js

2022-09-30 19:51

1 Answers

The parameter is
slug. $route.params.
You can retrieve it from the .

It seems that will be done like this.

Basically, external data can be loaded using asyncData and axios. I think it's better to read it.

2022-09-30 19:51

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656