accepting arrays for emmited data in buttonQuestion widget

This commit is contained in:
Max 2022-01-27 09:23:15 -05:00
parent 46cca70d3a
commit ceec84f168
2 changed files with 4 additions and 10 deletions

View file

@ -12,8 +12,8 @@
<component :is="buttonType" v-for="answer in answers" :key="answer.Name ? answer.Name : answer"
@mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
@keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
v-model="isChecked"
:buttonID="answer.Name ? answer.Name : answer"
:value="answer.Name ? answer.Name : answer"
:buttonLabel="answer.Text ? answer.Text : answer"
:buttonLabelSubCopy="answer.SubText"
:textPosition="textPosition"
@ -30,7 +30,6 @@
:altText="answer.Name ? answer.Name : answer"
screenReaderOnlyText="(opens new window)"
:colLength="this.answers.length < 3 ? '' : '-4'"
:modelValue="modelValue.includes(answer.Name)"
data-test="button"
/>
</div>
@ -75,7 +74,6 @@ export default {
isRequired: Boolean,
isOverflowScrollable: Boolean,
isWide: Boolean,
isChecked: Boolean,
modelValue: Array,
},
computed: {
@ -100,8 +98,7 @@ export default {
},
data(){
return {
modelValueAnswers: [],
isItemChecked: Boolean
modelValueAnswers: []
}
},
methods: {

View file

@ -2,7 +2,7 @@
<!-- Heavily documented below -->
<div :class="'col' + colLength">
<div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="isChecked" />
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="modelValue" />
<label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
<img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" :src="buttonImage" :alt="altText" />
<p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
@ -40,10 +40,8 @@ export default {
default: ""
},
colLength: String,
modelValue: String,
isChecked: Boolean
modelValue: String
},
emits: ['update:modelValue', 'update:isChecked'],
computed: {
getLabelClasses(){
if(this.isWide) {
@ -61,7 +59,6 @@ export default {
handleClick(value){
this.handleChange(value);
this.$emit("update:modelValue", value);
this.$emit("update:isChecked");
}
},
setup(props) {