Implemented proper checklist logic (fa848112) · Commits · OpenFlexure / openflexure-microscope-server

src/components/pluginComponents/formComponents/fieldComponents/checkList.vue

+20 −15

Original line number	Diff line number	Diff line
		@@ -5,7 +5,10 @@
		<div class="uk-form-controls">

		<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>
		@@ -24,21 +27,23 @@ export default {
		'value'
		],

		data: function () {
		return {
		itemsChecked: this.value \|\| []
		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)) {
		var newSelected = newSelected.filter(function(value, index, arr){
		return value != target.value;
		})
		}
		},

		computed: {
		computedChecked: {
		get() {
		return this.itemsChecked
		},
		set(val) {
		this.itemsChecked = val
		this.$emit('input', this.itemsChecked)
		}
		this.$emit('input', newSelected)
		}
		}
		}