Add two-way binding support to Accordion
parent
a1116063fd
commit
e5c9562a0a
|
@ -18,8 +18,10 @@ export default {
|
||||||
this.tabs.forEach(tab => tab.d_active = false);
|
this.tabs.forEach(tab => tab.d_active = false);
|
||||||
}
|
}
|
||||||
|
|
||||||
tab.d_active = !tab.d_active;
|
const newActiveState = !tab.d_active;
|
||||||
let eventName = !tab.active ? 'tab-close' : 'tab-open';
|
tab.d_active = newActiveState;
|
||||||
|
tab.$emit('update:active', newActiveState);
|
||||||
|
let eventName = newActiveState ? 'tab-open' : 'tab-close';
|
||||||
this.$emit(eventName, {
|
this.$emit(eventName, {
|
||||||
originalEvent: event,
|
originalEvent: event,
|
||||||
tab: tab
|
tab: tab
|
||||||
|
|
|
@ -54,7 +54,7 @@
|
||||||
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
|
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
|
||||||
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
|
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Accordion :multiple="true">
|
<Accordion :multiple="true">
|
||||||
<AccordionTab header="Godfather I" :active="active1">
|
<AccordionTab header="Godfather I" :active="active1">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
|
|
Loading…
Reference in New Issue