Sha256: 15ac069c8b3f1afa1d40ded923228d0f3c57acceeb1c9381a82c5bb46179e90b
Contents?: true
Size: 1.8 KB
Versions: 94
Compression:
Stored size: 1.8 KB
Contents
<template>
<div>
<div class="Vlt-form__element" v-bind:class="{ 'Vlt-form__element--error': hasError }">
<div v-for="(question, index) in step.questions" class="radio-button Vlt-radio">
<label>
<span class="Vlt-radio__button">
<input required="required" type="radio" :value=index v-model="answer">
<span class="Vlt-radio__icon"></span>
</span>
{{question}}
</label>
</div>
<small v-if="hasError"class="Vlt-form__element__error">This field is required</small>
<button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--tertiary Vlt-modal__cancel" v-on:click="reset">Cancel</button>
<button v-show="lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary Vlt-modal__cancel" v-on:click="reset">Close</button>
<button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary" v-on:click="validate">Continue</button>
</div>
</div>
</template>
<script>
import eventHub from '../eventHub';
export default {
props: ['step', 'lastStep'],
data: function() {
return {
answer: '',
hasError: false
};
},
methods: {
resetFields: function() {
this.answer = '';
this.hasError = false;
},
reset: function() {
eventHub.$emit('reset-modal');
},
validate: function() {
if (this.$el.querySelector('input[type="radio"]:checked') !== null) {
this.hasError = false;
eventHub.$emit('next-step', this.answer);
return false;
} else {
this.hasError = true;
}
}
},
mounted: function() {
eventHub.$on('reset-modal', this.resetFields);
}
}
</script>
<style scoped>
.radio-button {
margin-bottom: 11px;
}
.Vlt-form__element {
@media only screen and (min-width: 576px) {
width: 450px;
};
}
</style>
Version data entries
94 entries across 94 versions & 1 rubygems