Toggle other text input
This commit is contained in:
parent
96df6ff485
commit
9ff21bb58b
@ -18,6 +18,7 @@ export default {
|
||||
default: () => []
|
||||
},
|
||||
initialValue: Array,
|
||||
otherChecked: Boolean,
|
||||
},
|
||||
|
||||
|
||||
@ -26,7 +27,7 @@ export default {
|
||||
return {
|
||||
showError: showError,
|
||||
showValid: !showError && !!this.initialValue,
|
||||
validationError: this.initialErrors.join(' ')
|
||||
validationError: this.initialErrors.join(' '),
|
||||
}
|
||||
},
|
||||
|
||||
@ -39,6 +40,9 @@ export default {
|
||||
})
|
||||
this.showError = false
|
||||
this.showValid = true
|
||||
},
|
||||
otherToggle: function() {
|
||||
this.otherChecked = !this.otherChecked
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -29,10 +29,16 @@
|
||||
<ul>
|
||||
{% for f in field.choices %}
|
||||
<li>
|
||||
{% if f[0] != 'other' %}
|
||||
<input type='checkbox' name='options' id='{{ field.name }}-{{ field.choices.index(f) }}'/>
|
||||
<label for='{{ field.name }}-{{ field.choices.index(f) }}'>{{ f[1] }}</label>
|
||||
{% if f[0] == 'other' %}
|
||||
<input type='text' name='options' id='{{ field.name }}-other' aria-expanded='false'/>
|
||||
{% else %}
|
||||
<input @click="otherToggle" type='checkbox' name='options' id='{{ field.name }}-{{ field.choices.index(f) }}'/>
|
||||
<label for='{{ field.name }}-{{ field.choices.index(f) }}'>{{ f[1] }}</label>
|
||||
|
||||
<div v-show="otherChecked">
|
||||
<input type='text' name='options' id='{{ field.name }}-other' aria-expanded='false'/>
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
Loading…
x
Reference in New Issue
Block a user