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

Binary selection support for Checkbox

pull/5/head
cagataycivici 2018-12-15 13:00:03 +03:00
parent 269b053277
commit 5a81b20e5c
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/checkbox/Checkbox.vue
View File

@ -37,10 +37,15 @@ export default {
if (!this.disabled) { if (!this.disabled) {
let newModelValue; let newModelValue;
if (this.checked) if (Array.isArray(this.modelValue)) {
newModelValue = this.modelValue.filter(val => !ObjectUtils.equals(val, this.value)); if (this.checked)
else newModelValue = this.modelValue.filter(val => !ObjectUtils.equals(val, this.value));
newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value]; else
newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
}
else {
newModelValue = !this.modelValue;
}
this.$emit('click', event); this.$emit('click', event);
this.$emit('input', newModelValue); this.$emit('input', newModelValue);
@ -59,7 +64,7 @@ export default {
}, },
computed: { computed: {
checked() { checked() {
return this.modelValue != null && ObjectUtils.contains(this.value, this.modelValue); return Array.isArray(this.modelValue) ? ObjectUtils.contains(this.value, this.modelValue) : this.modelValue;
} }
} }
} }

12
src/views/checkbox/CheckboxDemo.vue
View File

@ -9,6 +9,10 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<p-checkbox inputId="binary" v-model="checked" />
<label for="binary" class="p-checkbox-label">{{checked}}</label>
<h3>Multiple</h3>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12"> <div class="p-col-12">
<p-checkbox inputId="city1" name="city" value="Chicago" v-model="cities" /> <p-checkbox inputId="city1" name="city" value="Chicago" v-model="cities" />
@ -29,7 +33,7 @@
</div> </div>
Selected Cities : {{cities}} Selected Cities : {{cities}}
<h3>Advanced with Preselection, Value Binding and Disabled Option</h3> <h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12"> <div class="p-col-12">
<p-checkbox inputId="theme1" name="template" :value="{brand: 'Ultima', key: 'U'}" v-model="themes" /> <p-checkbox inputId="theme1" name="template" :value="{brand: 'Ultima', key: 'U'}" v-model="themes" />
@ -57,14 +61,10 @@
export default { export default {
data() { data() {
return { return {
checked: false,
cities: [], cities: [],
themes: [{brand: 'Serenity', key: 'S'}, {brand: 'Apollo', key: 'A'}] themes: [{brand: 'Serenity', key: 'S'}, {brand: 'Apollo', key: 'A'}]
} }
},
methods: {
onChange() {
console.log('change');
}
} }
} }
</script> </script>