sweet-modal-vue

sweet-modal-vue copied to clipboard

Currently if I have some tabs like so:

<sweet-modal-tab
            :title="submission.name"
            :id="submission.video_id"
            v-for="submission in userSubmissions"
            v-if="loaded">

            <h2>{{ submission.name }}</h2>

      </sweet-modal-tab>

There are no tabs. The content will be loaded but the tabs never are so I cant navigate or see the content thats in the <slot>. Can you not do dynamic tabs with a v-for?

You can but you're missing the slot-attribute. Also you have to supply a key attribute (required by Vue).

@bluefirex sorry I am confused, I added a key like so:

<sweet-modal-tab
            :title="submission.wod.name"
            :id="submission.video_id"
            v-for="(submission, key) in userSubmissions"
            v-if="loaded"
            v-bind:key="submission.id">

            <h2>{{ submission.wod.name }}</h2>

      </sweet-modal-tab>

But your docs dont have a slot for tabs? I see a slot for button and box-action. Here is how you have tabs in the docs:

<sweet-modal>
	<sweet-modal-tab title="Tab 1" id="tab1">Contents of Tab 1</sweet-modal-tab>
	<sweet-modal-tab title="Tab 2" id="tab2">Contents of Tab 2</sweet-modal-tab>
	<sweet-modal-tab title="Tab 3" id="tab3" disabled>Tab 3 is disabled</sweet-modal-tab>
</sweet-modal>

i'm facing the same issue, how can we do this? it's not showing the tabs, even with the :key added as you suggested