Reputation: 13
I don't know if this is possible because I didn't find the solution or I searched wrongly. I would like a click on the template to just launch some function from methods eg. Axios
sd.vue
<template v-slot:tabPanel-1> <!-- Click this run Axios -->
{{ model.name.value }}
</template>
<template v-slot:tabPanel-2>
{{ model.name.value }}
</template>
And this is component for tabs
AppTabs.vue
<template>
<div class="TabsApp">
<ul class="TabsButtons" :class="{'': variant === '',}">
<li
v-for="(tab, index) in tabList"
:key="index"
class="TabsSingle"
:class="{
'TabsSingleActive': index + 1 === activeTab,
'text-white': index + 1 !== activeTab,
}"
>
<label
:for="`${_uid}${index}`"
v-text="tab"
class="cursor-pointer block"
/>
<input
:id="`${_uid}${index}`"
type="radio"
:name="`${_uid}-tab`"
:value="index + 1"
v-model="activeTab"
class="TabsInput"
/>
</li>
</ul>
<template v-for="(tab, index) in tabList">
<div @click="clickCard(tab, index)"
:key="index"
v-if="index + 1 === activeTab"
class=""
>
<slot :name="`tabPanel-${index + 1}`" />
</div>
</template>
</div>
</template>
<script>
export default {
props: {
tabList: {
type: Array,
required: true,
},
variant: {
type: String,
required: false,
default: () => "vertical",
validator: (value) => ["horizontal", "vertical"].includes(value),
},
},
data() {
return {
activeTab: 1,
};
},
};
</script>
Do you have any idea how in sd.vue component When the Template was clicked it triggered some function? Thank you for your answers :)
Upvotes: 0
Views: 76