Add two-way binding support to Accordion

pull/12/head
cagataycivici 2019-05-23 16:28:09 +03:00
parent a1116063fd
commit e5c9562a0a
2 changed files with 5 additions and 3 deletions

View File

@ -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

View File

@ -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,