PronounsPage/components/ListExpandable.vue

<template>
    <ul class="list-unstyled">
        <li v-for="(value, key, i) in data" v-if="expanded || i < 10">
            <slot :k="key" :v="value">
                <strong>{{ key }}</strong>: {{ value }}
            </slot>
        </li>
        <li v-if="!expanded">
            <a href="#" @click.prevent="expanded = true">
                <T>table.more</T>
                <Icon v="caret-down" />
            </a>
        </li>
    </ul>
</template>

<script>
export default {
    props: {
        data: { required: true },
        initial: { default: 10 },
    },
    data() {
        return {
            expanded: false,
        };
    },
};
</script>