Closed Greendogo closed 2 years ago
Hi @Greendogo,
You should use the Vue component
tag which allows you to mount dynamic components.
https://vuejs.org/api/sfc-script-setup.html#dynamic-components
Something like this:
<template>
<w-dialog
title="Settings"
width="20em"
>
<w-tabs :items="tabs">
<template #item-content="{ item }">
<component :is="item.component"></component>
</template>
</w-tabs>
<template #actions>
<w-button @click="closeDialog">
Close
</w-button>
</template>
</w-dialog>
</template>
<script lang="ts" setup>
import ConnectionSettings from './ConnectionSettings.vue';
import PollingSettings from './PollingSettings.vue';
const tabs = [
{title: "Connections", component: ConnectionSettings },
{title: "Polling", component: PollingSettings }
]
const emit = defineEmits(['close'])
const closeDialog = () => {
emit('close')
}
</script>
Hope it helps! :)
That worked perfectly, thanks! :)
I have a different Vue Component for each Tab. How do I pass this into the contents of the tab element? Can I use the tabs object in my script to pass this in instead of putting it explicitly in the element definition?
Below is kind of what I was trying to do. I have two other vue components that I want to insert into each tab: