Zaimki/routes/faq.vue

<template>
    <div>
        <LinksNav v-if="config.links.enabled"/>

        <h2>
            <Icon v="map-marker-question"/>
            <T>faq.headerLong</T>
        </h2>

        <details class="border mb-3" open>
            <summary class="d-none"/>
            <div class="px-3">
                <Mission/>
            </div>
        </details>

        <Answer v-for="question in Object.keys($t('faq.questions'))" :key="question"
                :question="question"
                :id="question" :ref="question.replace(/-/g, '_')"
                @click="setHash('', question)"
        />

        <section>
            <Share :title="$t('faq.headerLong')"/>
        </section>
    </div>
</template>

<script>
    import { head } from "../src/helpers";
    import hash from "../plugins/hash";

    export default {
        mixins: [ hash ],
        mounted() {
            this.handleHash('', hash => {
                const $component = this.$refs[hash.replace(/-/g, '_')];
                if (!$component) {
                    return;
                }
                const $el = $component[0].$el;
                $el.open = true;
                $el.focus();
                $el.scrollIntoView();
                setTimeout(_ => {
                    $el.scrollIntoView();
                }, 1000);
            }, false)
        },
        head() {
            return head({
                title: this.$t('faq.headerLong'),
            });
        },
    };
</script>

<style lang="scss" scoped>
    details {
        summary {
            font-weight: bold;
        }
    }
</style>