I am currently working on a list component that will display a series of router-links, each with a scoped slot. The parent should have the ability to configure the "to" property of the router-link.
The goal is for the parent component to easily customize the router link's "to" property without needing to directly implement the router-link itself. If implementation is necessary, the list component should be able to pass classes to each router-link.
To better illustrate the issue I'm facing, I've created a CodePen. Please feel free to reach out if you need further clarification. https://codepen.io/Buffalom/pen/KKPmJPx
Summarizing my objective:
<router-link v-for="item in items" to="/" class="abc">
<!-- :to should be configurable by the parent -->
<slot :item="item"></slot>
</router-link>
The expectation is for the parent to render a list using an array of items, while being able to individually configure the "to" property for each router-link.
Update
An optimal solution would involve something like this within the parent component:
<List :items="items" :to="`/1/${item.name}`">
...
This setup would allow each item in the "items" array to be used as the "to" property value in the v-for loop of the list component's router-link. It's akin to a reverse scoped-slot concept...^^