Implemented proper checklist logic
This commit is contained in:
parent
cf1e766464
commit
fa848112ca
1 changed files with 19 additions and 14 deletions
|
|
@ -5,7 +5,10 @@
|
||||||
<div class="uk-form-controls">
|
<div class="uk-form-controls">
|
||||||
|
|
||||||
<div v-for="option in options" :key="option">
|
<div v-for="option in options" :key="option">
|
||||||
<label><input class="uk-checkbox" type="checkbox" v-bind:value="option" v-model="computedChecked"> {{ option }}</label>
|
<label>
|
||||||
|
<input class="uk-checkbox" type="checkbox" v-bind:value="option" v-bind:checked="(value && value.includes(option))" @change="updateValue($event.target)">
|
||||||
|
{{ option }}
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -24,21 +27,23 @@ export default {
|
||||||
'value'
|
'value'
|
||||||
],
|
],
|
||||||
|
|
||||||
data: function () {
|
methods: {
|
||||||
return {
|
updateValue(target) {
|
||||||
itemsChecked: this.value || []
|
var newSelected = this.value != null ? [...this.value] : [] // Clone value array
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
if (target.checked) {
|
||||||
computedChecked: {
|
if (!newSelected.includes(target.value)) {
|
||||||
get() {
|
newSelected.push(target.value)
|
||||||
return this.itemsChecked
|
}
|
||||||
},
|
|
||||||
set(val) {
|
|
||||||
this.itemsChecked = val
|
|
||||||
this.$emit('input', this.itemsChecked)
|
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
if (newSelected.includes(target.value)) {
|
||||||
|
var newSelected = newSelected.filter(function(value, index, arr){
|
||||||
|
return value != target.value;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$emit('input', newSelected)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue