You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
docuseal/app/javascript/submission_form/checkbox_step.vue

55 lines
1012 B

<template>
<div
v-for="(option, index) in field.options"
:key="index"
>
<label :for="field.uuid + option">
<input
:id="field.uuid + option"
:ref="setInputRef"
type="checkbox"
:name="`values[${field.uuid}][]`"
:value="option"
:checked="modelValue.includes(option)"
@change="onChange"
>
{{ option }}
</label>
</div>
</template>
<script>
export default {
name: 'SheckboxStep',
props: {
field: {
type: Object,
required: true
},
modelValue: {
type: Array,
required: false,
default: () => []
}
},
emits: ['update:model-value'],
data () {
return {
inputRefs: []
}
},
beforeUpdate () {
this.inputRefs = []
},
methods: {
setInputRef (el) {
if (el) {
this.inputRefs.push(el)
}
},
onChange () {
this.$emit('update:model-value', this.inputRefs.filter(e => e.checked).map(e => e.value))
}
}
}
</script>