PronounsPage/components/Noun.vue

<template>
    <div>
        <ul class="list-singular">
            <li v-for="w in noun[gender]">
                <Abbreviation v-slot="{ word }" :v="w">
                    <Declension
                        v-if="gender === 'neutr' && $config.nouns.declension"
                        :word="word"
                        tooltip
                    />
                    <Spelling v-else :text="word" />
                </Abbreviation>
            </li>
        </ul>
        <ul v-if="$config.nouns.plurals" class="list-plural">
            <li v-for="w in noun[`${gender}Pl`]">
                <Abbreviation v-slot="{ word }" :v="w">
                    <Declension
                        v-if="gender === 'neutr' && $config.nouns.declension"
                        :word="word"
                        plural
                        :singular-options="noun.neutr"
                        tooltip
                    />
                    <Spelling v-else :text="word" />
                </Abbreviation>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        noun: { required: true },
        gender: { required: true },
    },
};
</script>