PronounsPage/components/DayMonth.vue

<template>
    <div class="d-flex flex-grow-1">
        <select v-model="month" class="form-select">
            <option v-for="m in 12" :value="m">
                <T>calendar.months.{{ m }}</T>
            </option>
        </select>
        <select v-model="day" class="form-select">
            <option v-for="d in 31" :value="d">
                {{ d }}
            </option>
        </select>
    </div>
</template>

<script>
export default {
    props: {
        modelValue: { required: true, type: String },
    },
    emits: ['update:modelValue'],
    data() {
        const [month, day] = this.modelValue ? this.modelValue.split('-') : ['1', '1'];
        return {
            month: parseInt(month),
            day: parseInt(day),
        };
    },
    computed: {
        dayMonth() {
            return `${this.month.toString().padStart(2, '0')}-${this.day.toString().padStart(2, '0')}`;
        },
    },
    watch: {
        modelValue() {
            const [month, day] = this.modelValue ? this.modelValue.split('-') : ['1', '1'];
            this.month = parseInt(month);
            this.day = parseInt(day);
        },
        month() {
            this.$emit('update:modelValue', this.dayMonth);
        },
        day() {
            this.$emit('update:modelValue', this.dayMonth);
        },
    },
};
</script>