siimee/frontend/src/components/onboarding/Aspects.vue

<template lang="pug">
p {{ aspectQuestions }}
//- form.questionnaire(@submit.prevent='this.$emit("handle-submit")')

//- p(v-for='question in aspectQuestions')
//-     QuestionResponse(
//-         :question='question'
//-         @updated='updateRadio'
//-         @updateIsAnswered='updateIsAnswered'
//-         @update-all='updateAll'
//-         v-if='question.isBeingAnswered'
//-     )
</template>

<script>
import QuestionResponse from './QuestionResponse.vue'
import { aspectsArr } from '../../utils/lang.js'

export default {
    name: 'Aspects',
    components: {
        QuestionResponse,
    },
    props: {
        aspectQuestions: {
            required: true,
            type: Array,
        },
    },
    emits: ['handle-submit', 'update-answers'],
    data: () => ({
        answered: [],
    }),
    async created() {
        this.aspectQuestions.forEach((q, i) => {
            console.log(`Aspect #${i}: ${JSON.stringify(q)}`)
            q.isBeingAnswered = i === 0 ? true : false
        })
        aspectsArr.forEach(() => {
            this.answered.push(null)
        })
    },
    methods: {
        updateAll() {
            this.$emit('handle-submit')
        },
        updateRadio(onRadioSelect) {
            this.answered[onRadioSelect.id - 1] = onRadioSelect.answer
            this.$emit('update-answers', {
                key: 'Aspects',
                question: {
                    survey_stage: 'aspects',
                },
                input: this.answered,
            })
        },
        updateIsAnswered(id) {
            this.aspectQuestions.forEach((q, i) => {
                if (i === id - 1) {
                    const nextQ = this.aspectQuestions[id]
                    q.isBeingAnswered = false
                    nextQ.isBeingAnswered = true
                }
            })
        },
    },
}
</script>