I'm currently working on dynamically updating a <router-link> path, depending on the view component it is being used in. Below you can see the <router-link> element that iterates through the compItems array, which is filled with data from each view component.
<router-link :to="{ name: compItem.name, params: { compItems: compItem.router } }" class="cz-ds-view-related-comp" v-for="compItem in compItems" :key="compItem.name">
<div class="related-comp_icon"><img class="related-comp_icon" :src="require('@/assets/home/icons/' + compItem.atomicIcon + '')" alt=""></div>
<div class="related-comp_title"><h3>{{ compItem.name }}</h3> <img src="../../assets/home/icons/arrow-right.svg"></div>
</router-link>
export default {
name: 'relatedSection',
props: {
compItems: {
type: Array
}
}
}
</script>
Here's an example of a view component setting up router data:
data () {
return {
compItems: [
{ name: 'Links', atomicIcon: 'atom.svg', router: 'links'},
{ name: 'Form Elements', atomicIcon: 'atom.svg', router: 'form-elements'},
{ name: 'Avatars', atomicIcon: 'atom.svg', router: 'avatars'},
{ name: 'Badges', atomicIcon: 'atom.svg', router: 'badges'}
]
}
}
Currently encountering a console error and seeking assistance.
Thank you in advance!
Edit:
Below is a snapshot from the router file:
const routes = [{
path: '/',
name: 'home',
props: true,
component: Home
}, {
path: '/avatars',
name: 'avatars',
props: true,
component: Avatars
}, {
path: '/badges',
name: 'badges',
props: true,
component: Badges
}, {
path: '/buttons',
name: 'buttons',
props: true,
component: Buttons
}, {
path: '/breadcrumbs',
name: 'breadcrumbs',
props: true,
component: Breadcrumbs
}, {
path: '/form-elements',
name: 'form-elements',
props: true,
component: FormElements
}, {
path: '/icons',
name: 'icons',
props: true,
component: Icons
},
...