[Vuejs]-How to bind a variable prop to a v-for slot

by

0👍

Is this what you’re looking for? You just need to make to a dynamic prop.

<router-link v-for="item in items" :to="item.url" class="abc">
    <!-- :to should be configurable by the parent -->
    <slot :item="item"></slot>
</router-link>

Update

If you don’t have the url, look into vue-router named routes. Taken from the doc and adapted lightly:

const router = new VueRouter({
  routes: [
    {
      path: '/1/:itemName',
      name: 'item',
      component: MyItemPage
    }
  ]
})

<router-link
    v-for="item in items"
    :to="{ name: 'item', params: { itemName: item.name }}"
    class="abc"
>
    <slot :item="item"></slot>
</router-link>

Leave a comment