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

<template lang="pug">
.role
    h3 {{ question.response_key_category }}
    p {{ question.response_key_prompt }}
    w-select.mt4(:items='items' placeholder='i am' v-model='selection')
    w-button.ma1.grow(@click='handleSubmit') NEXT
</template>

<script>
export default {
    name: 'FormDropdown',
    props: {
        question: {
            required: true,
            type: Object,
        },
    },
    emits: ['update-answers'],
    data: () => ({
        selection: null,
    }),
    computed: {
        items() {
            return this.question.responses.map(res => ({ label: res }))
        },
    },
    methods: {
        handleSubmit() {
            if (!this.selection) {
                console.warn('Please select a role.')
                return
            }
            let payload = {
                question: this.question,
                answer: this.selection,
            }
            this.$emit('update-answers', payload)
        },
    },
}
</script>