Okatawo
Okatawo

Reputation: 13

VUE onclick v-slot to run Axios

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

Answers (0)

Related Questions