[Vuejs]-Change Data in Vue Component depending on Route

1👍

✅

You can use Vue-router’s feature Dynamic Route Matching and access the :id using this.$route.params.id in your component

Or you can pass route parameters as props.
Just change your route definition to { path: '/Portfolio/:id', component: subitem, props: true }, and define id prop in your subitem component

You can use passed id to filter the array of your photos, for example like this:

computed: {
  getPhotosById(id) {
    return this.photos.filter(photo => photo.igm.startsWith(`Images/Portfolio/${id}/`))
  }
}

and in the template do v-for="photos in getPhotosById($route.params.id)"

Leave a comment