70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
<template>
|
|
<div>
|
|
<label>{{ label }}</label>
|
|
|
|
<div class="uk-form-controls">
|
|
<div v-for="option in options" :key="option">
|
|
<label>
|
|
<input
|
|
class="uk-checkbox"
|
|
type="checkbox"
|
|
:value="option"
|
|
:checked="value && value.includes(option)"
|
|
v-bind="$attrs"
|
|
@change="updateValue($event.target)"
|
|
/>
|
|
{{ option }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "CheckList",
|
|
|
|
props: {
|
|
value: {
|
|
type: Array,
|
|
required: false,
|
|
default: function() {
|
|
return [];
|
|
},
|
|
},
|
|
options: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
updateValue(target) {
|
|
var newSelected = this.value != null ? [...this.value] : []; // Clone value array
|
|
|
|
if (target.checked) {
|
|
if (!newSelected.includes(target.value)) {
|
|
newSelected.push(target.value);
|
|
}
|
|
} else {
|
|
if (newSelected.includes(target.value)) {
|
|
newSelected = newSelected.filter(function(value) {
|
|
return value != target.value;
|
|
});
|
|
}
|
|
}
|
|
this.$emit("input", newSelected);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|