avoriaz icon indicating copy to clipboard operation
avoriaz copied to clipboard

Scoped slots (slot-scope) issues

Open viktorlarsson opened this issue 6 years ago • 3 comments

Currently scoped slots in our project, but we have come across when having multiple slots on the same component.

This is an example we are using it at the moment:

vuecomponent.vue

<template>
    <span><slot name="test"></slot></span>
    <button><slot name="test"></slot></button>
</template>

test.html

<vuecomponent>
    <template slot="test" slot-scope="multiple">Testing</template>
</vuecomponent>

vuecomponent.spec.ts

import Vuecomponent from '@/components/vuecomponent.vue';

const test= Vue.component('test', {
   template: `<span>testtest</span>`,
});
const comp = mount(Vuecomponent, {
   slots: {
        'add-button': mount(test),
    },
});

And when we are mounting it using Avoriaz, the following issue is presented in the console:

[Vue warn]: Duplicate presence of slot "test" found in the same render tree - this will likely cause render errors.

Can't find any way on how to define the slot-scope. Is it possible to do this?

viktorlarsson avatar May 04 '18 10:05 viktorlarsson

Sorry, this isn't possible with avoriaz. You can use vue-test-utils which has a similar API and includes a scopedSlots mounting option.

eddyerburgh avatar May 04 '18 18:05 eddyerburgh

Thank you! Any reason why this won't be implemented?

viktorlarsson avatar Jun 12 '18 12:06 viktorlarsson

I don't have time 😛! If someone made a PR I'd be happy to review

eddyerburgh avatar Jun 12 '18 13:06 eddyerburgh