accepting arrays for emmited data in buttonQuestion widget
This commit is contained in:
parent
46cca70d3a
commit
ceec84f168
2 changed files with 4 additions and 10 deletions
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue