PronounsPage/components/Example.vue

<template>
    <span>
        <span v-for="part in example.parts(pronoun, counter)">
            <strong v-if="part.variable"><Morpheme :pronoun="pronoun" :morpheme="part.str" :counter="counter"/></strong>
            <span v-else><Spelling :text="part.str"/></span>
        </span>
        <small v-if="link">
            (<nuxt-link :to="'/' + pronoun.canonicalName"><Spelling escape :text="pronoun.canonicalName"/></nuxt-link>)
        </small>
        <template v-if="config.pronunciation.enabled && pronunciation && pronoun.pronounceable && example.toPronunciationString(pronoun)">
            <a v-for="(pLink, name) in pronunciationLinks"
               class="mr-2"
               dir="ltr"
               :href="pLink"
               @click.prevent="pronounce(pLink)">
                <Icon v="volume"/><sub v-if="name">{{name}}</sub>
            </a>
        </template>
    </span>
</template>

<script>
    export default {
        props: {
            example: { required: true },
            pronoun: { required: true },
            counter: { default: 0 },
            link: { type: Boolean },
            pronunciation: { type: Boolean },
        },
        methods: {
            pronounce(link) {
                const sound = new Audio(link);
                sound.play();
            }
        },
        computed: {
            pronunciationLinks() {
                const justOne = Object.keys(this.config.pronunciation.voices).length === 1;

                const links = {};
                for (let country in this.config.pronunciation.voices) {
                    links[justOne ? '' : country] = `/api/pronounce/${country}/${encodeURIComponent(this.example.toPronunciationString(this.pronoun))}`;
                }
                return links;
            }
        }
    }
</script>