Two way binding support to Panel

pull/12/head
cagataycivici 2019-05-23 16:11:45 +03:00
parent 08b8e56224
commit a1116063fd
3 changed files with 25 additions and 3 deletions

View File

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

View File

@ -32,8 +32,8 @@
import PanelDoc from './PanelDoc';
export default {
components: {
'PanelDoc': PanelDoc
}
components: {
'PanelDoc': PanelDoc
}
}
</script>

View File

@ -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.
&lt;/Panel&gt;
</CodeHighlight>
<p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
<CodeHighlight>
&lt;Panel header="Header Text" :toggleable="true" :collapsed="true"&gt;
Content
&lt;/Panel&gt;
</CodeHighlight>
<p>Use the sync operator to enable two-way binding.</p>
<CodeHighlight>
&lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt;
&lt;Panel header="Header Text" :toggleable="true" :collapsed.sync="isCollapsed"&gt;
Content
&lt;/Panel&gt;
</CodeHighlight>
<h3>Properties</h3>