vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Two way binding support to Fieldset

pull/12/head
cagataycivici 2019-05-23 16:30:37 +03:00
parent 5f85149b6c
commit 5144c41bf3
2 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/fieldset/Fieldset.vue
View File

@ -36,6 +36,7 @@ export default {
methods: { methods: {
toggle(event) { toggle(event) {
this.d_collapsed = !this.d_collapsed; this.d_collapsed = !this.d_collapsed;
this.$emit('update:collapsed', this.d_collapsed);
this.$emit('toggle', { this.$emit('toggle', {
originalEvent: event, originalEvent: event,
value: this.d_collapsed value: this.d_collapsed

15
src/views/fieldset/FieldsetDoc.vue
View File

@ -39,6 +39,21 @@ import Fieldset from 'primevue/fieldset';
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, 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. kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</Fieldset> </Fieldset>
</CodeHighlight>
<p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
<CodeHighlight>
&lt;Fieldset legend="Header Text" :toggleable="true" :collapsed="true"&gt;
Content
&lt;/Fieldset&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;Fieldset legend="Header Text" :toggleable="true" :collapsed.sync="isCollapsed"&gt;
Content
&lt;/Fieldset&gt;
</CodeHighlight> </CodeHighlight>
<h3>Properties</h3> <h3>Properties</h3>