PronounsPage/components/ZineSubmissions.vue

<template>
    <div>
        <ul class="list-unstyled">
            <li v-for="{ icon, label, content } in submissionRules" :key="label" class="mb-2">
                <h4>
                    <Icon :v="icon" />
                    <LinkedText :text="label" />:
                </h4>
                <ul v-if="Array.isArray(content)">
                    <li v-for="el in content">
                        <LinkedText :text="el" />
                    </li>
                </ul>
                <p v-else>
                    <LinkedText :text="content" />
                </p>
            </li>
        </ul>

        <p class="small">
            <Icon v="info-circle" />
            <T>links.zine.submissions.disclaimer</T>
        </p>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

interface SubmissionRule {
    icon: string; label: string; content: string | string[];
}

export default defineComponent({
    computed: {
        submissionRules(): SubmissionRule[] {
            // extract translation to computed property as type casts are not allowed in template syntax for Vue 2.7
            return this.$t('links.zine.submissions.rules') as unknown as SubmissionRule[];
        },
    },
});
</script>