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;
                    }
                    let 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>