[Vuejs]-Slot: access scope variables

by

0👍

UPDATE2:
the following code does not work due to https://github.com/vuejs/vue/issues/2511. I can’t think of anything else. sorry.

UPDATE:

To achieve specific slot overriding, define slots as 

<button v-for='item in items' v-on:click="this.$emit('activate', item)">
    <slot v-bind:name="'item-'+item.name">{{ item.name }}</slot>
</button>

and override as 

<my-component items="myItems">
    //you have access to items so you can do this
    //specialItems is an array of items which are to be overriden
    <span class="myspecialstuff" v-for="item in specialItems" v-bind:slot="'item-'+item.name" >
        {{ item.name }}
    </span>
</my-component>

Original answer:
that will be very convoluted imho.

there are 2 ways to achieve what you want depending on where <my-component is getting items.

  1. items is passed to my-component as props. (most common case). In that case, you already have access to items and do not need to jump through hoops for it.

  2. <my-component> is getting items through some external sources like a form or api.(less likely) in this case, you can either raise events to pass data or use 2-way bindings through .sync

Leave a comment