Vue : params value don't change in created method

Question

I have this link to another component with params :

<div class="dropdown-menu bg-light" aria-labelledby="navbarDropdown">
      <div v-for="category in categories" :key="category.id">
         <div v-if="lang=='ku'"><li><a class="dropdown-item font-weight-bold py-2" href="#" ><router-link :to="{name:'category',params:{id:category.id}}">{{category.catagory_ku}}</router-link></a></li></div>

          <div v-else><li><a class="dropdown-item font-weight-bold py-2" href="#" ><router-link :to="{name:'category',params:{id:category.id}}">{{category.catagory_ar}}</router-link></a></li></div> 
          </div>
     </div>

the category component like this :

<template>
    <div style="margin-top:132px">
        Categories {{id}}
    </div>
</template>
<script>
export default {
data(){
    return {
        id :''
    }
},
created(){
    this.id=this.$route.params.id
}
}
</script>

when i pressed the route link the id value changed in url but in the page view it just take first id value I clicked and not be changed after I clicked another same link by different id value

Answer 1

Try to define the id as computed property :

<template>
    <div style="margin-top:132px">
        Categories {{id}}
    </div>
</template>
<script>
export default {
   computed:{
      id(){
        return this.$route.params.id
      }
 }
}
</script>