I am trying to find a solution for overwriting the primevue component class p-accordion-header
to have different styles depending on the status of the rendered component that I can get with the variantNumber
.
This is what my code looks like:
<Accordion :multiple="true">
<AccordionTab
v-for="variantNumber in variants?.keys()"
:key="'V' variantNumber"
>
</AccordionTab>
</Accordion>
where variants
is a simple list.
Imagine I have a function that returns the current class name called getCurrentVariantClass(variantNumber)
.
- I can't add a class to the
AccordionTab
because it would be a non-props attribute. - I tried to wrap a
div
or a simple html tag around theAccordionTab
and add a class there but the component won't render.
How am I supposed to overwrite the styles of p-accordion-header
conditionally?
CodePudding user response:
To be able to customize AccordionTab
to receive a variant
prop, we could create a new component that uses the extends
option, and add the prop there:
<!-- MyAccordionTab.vue -->
<script>
import { defineComponent } from 'vue'
import AccordionTab from 'primevue/accordiontab'
export default defineComponent({
name: 'AccordionTab', // must be named "AccordionTab" for Accordion to detect it
extends: AccordionTab,
props: {
variant: Number,