PronounsPage/components/ComprehensiveSwitch.vue

<template>
    <div v-if="config.pronouns.comprehensive" class="btn-group" role="group">
        <button
            :class="['btn btn-sm', !comprehensive ? 'btn-primary' : 'btn-outline-primary']"
            @click="comprehensive = false"
        >
            <T>pronouns.comprehensive.simple</T>
        </button>
        <button
            :class="['btn btn-sm', comprehensive ? 'btn-primary' : 'btn-outline-primary']"
            @click="comprehensive = true"
        >
            <T>pronouns.comprehensive.comprehensive</T>
        </button>
    </div>
</template>

<script>
export default {
    emits: ['update:comprehensive'],
    computed: {
        comprehensive: {
            get() {
                return this.$route.query.hasOwnProperty(this.config.pronouns.comprehensive);
            },
            set(value) {
                if (value == this.comprehensive) {
                    // prevent warning that $router.replace has no effect
                    return;
                }
                const query = Object.assign({}, this.$route.query);
                if (value) {
                    query[this.config.pronouns.comprehensive] = null;
                } else {
                    delete query[this.config.pronouns.comprehensive];
                }
                this.$router.replace({ query });
                this.$emit('update:comprehensive', value);
            },
        },
    },
    mounted() {
        this.$emit('update:comprehensive', this.comprehensive);
    },
};
</script>