Refactor multi_checkbox_input
This component was made when having an "other" value as a check option also meant typing in a custom value into an input field. Since this is no longer needed, we were able to remove the markup / vue code for that feature.
This commit is contained in:
parent
f4f3e3dee3
commit
80f028540c
@ -13,22 +13,14 @@ export default {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
initialOtherValue: String,
|
||||
optional: Boolean,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
const showError = (this.initialErrors && this.initialErrors.length) || false
|
||||
return {
|
||||
showError: showError,
|
||||
showValid: !showError && this.initialValue.length > 0,
|
||||
showError: this.initialErrors.length > 0,
|
||||
showValid: false,
|
||||
validationError: this.initialErrors.join(' '),
|
||||
otherChecked: this.initialValue.includes('other')
|
||||
? true
|
||||
: this.otherChecked,
|
||||
otherText: this.initialValue.includes('other')
|
||||
? this.initialOtherValue
|
||||
: '',
|
||||
selections: this.initialValue,
|
||||
}
|
||||
},
|
||||
@ -36,17 +28,15 @@ export default {
|
||||
methods: {
|
||||
onInput: function(e) {
|
||||
emitFieldChange(this)
|
||||
this.showError = false
|
||||
this.showValid = true
|
||||
},
|
||||
otherToggle: function() {
|
||||
this.otherChecked = !this.otherChecked
|
||||
this.showError = !this.valid
|
||||
this.showValid = !this.showError
|
||||
this.validationError = 'This field is required.'
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
valid: function() {
|
||||
return this.optional || this.showValid
|
||||
return this.optional || this.selections.length > 0
|
||||
},
|
||||
},
|
||||
}
|
||||
|
@ -45,19 +45,8 @@
|
||||
<ul>
|
||||
{% for choice in field.choices %}
|
||||
<li>
|
||||
{% if choice[0] != 'other' %}
|
||||
<input type='checkbox' name='{{ field.name }}' id='{{ field.name }}-{{ loop.index0 }}' value='{{ choice[0] }}' v-model="selections"/>
|
||||
<label for='{{ field.name }}-{{ loop.index0 }}'>{{ choice[1] | safe }}</label>
|
||||
{% else %}
|
||||
<input @click="otherToggle" type='checkbox' name='{{ field.name }}' id='{{ field.name }}-{{ loop.index0 }}' value='other' v-model="selections"/>
|
||||
<label for='{{ field.name }}-{{ loop.index0 }}'>{{ choice[1] | safe }}</label>
|
||||
|
||||
{% if other_input_field %}
|
||||
<div v-show="otherChecked">
|
||||
<input type='text' name='{{ other_input_field.name}}' id='{{ field.name }}-other' v-model:value="otherText" aria-expanded='false' />
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
Loading…
x
Reference in New Issue
Block a user