Two way binding support to Panel
parent
08b8e56224
commit
a1116063fd
|
@ -30,9 +30,15 @@ export default {
|
|||
d_collapsed: this.collapsed
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
collapsed(newValue) {
|
||||
this.d_collapsed = newValue;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle(event) {
|
||||
this.d_collapsed = !this.d_collapsed;
|
||||
this.$emit('update:collapsed', this.d_collapsed);
|
||||
this.$emit('toggle', {
|
||||
originalEvent: event,
|
||||
value: this.d_collapsed
|
||||
|
|
|
@ -32,8 +32,8 @@
|
|||
import PanelDoc from './PanelDoc';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'PanelDoc': PanelDoc
|
||||
}
|
||||
components: {
|
||||
'PanelDoc': PanelDoc
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -38,6 +38,22 @@ import Panel from 'primevue/panel';
|
|||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</Panel>
|
||||
</CodeHighlight>
|
||||
|
||||
<p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
|
||||
<CodeHighlight>
|
||||
<Panel header="Header Text" :toggleable="true" :collapsed="true">
|
||||
Content
|
||||
</Panel>
|
||||
</CodeHighlight>
|
||||
|
||||
<p>Use the sync operator to enable two-way binding.</p>
|
||||
|
||||
<CodeHighlight>
|
||||
<button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically</button>
|
||||
<Panel header="Header Text" :toggleable="true" :collapsed.sync="isCollapsed">
|
||||
Content
|
||||
</Panel>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
Loading…
Reference in New Issue