Vue компонент, проходящий через себя: не удалось смонтировать компонент: шаблон или функция визуализации не определены - PullRequest
Новая
       9

Vue компонент, проходящий через себя: не удалось смонтировать компонент: шаблон или функция визуализации не определены

0 голосов
/ 27 сентября 2018

Не могу быть в состоянии понять это.У меня есть основной компонент-обертка, который использует другой компонент для визуализации структуры навигации.

Навигация может быть многоуровневой, поэтому ее необходимо генерировать динамически.

Оболочка выглядит следующим образом: * 1005Компоненты * 

<template>
    <nav v-if="this.navigation.length">
        <link-role :collection="navigation"></link-role>
    </nav>
</template>
<script>
    import LinkRole from './Formats/LinkRole';
    export default {
        components: {
            'link-role': LinkRole,
        },
        props: {
            navigation: {
                type: Object,
                default: () => { return {} }
            }
        }
    }
</script>

и LinkRole примерно так: 

<template>
    <ul>
        <li v-for="(item, index) in collection" :key="index">
            <a v-if="item.url" :href="item.url" v-text="item.name"></a>
            <span v-else v-text="item.name"></span>
            <link-role v-if="item.items" :collection="item.items"></link-role>
        </li>
    </ul>
</template>
<script>
    import LinkRole from './LinkRole';
    export default {
        components: {
            'link-role': LinkRole,
        },
        props: {
            collection: {
                type: [Object, Array],
                default: () => []
            }
        },
    }
</script>

Как вы можете видеть в LinkRole Я перебираю элементы коллекции и использую сам себя LinkRoleесли есть другой уровень items.

При таком подходе я получаю

[Vue warn]: не удалось смонтировать компонент: шаблон или функция визуализации не определена.

но не могу понять, что его вызывает.

1 Ответ

0 голосов
/ 27 сентября 2018

В соответствии с документами вам необходимо предоставить опцию name в вашем компоненте, чтобы иметь возможность использовать его рекурсивно ..

Компоненты могут рекурсивно вызывать себяв своем собственном шаблоне.Однако они могут делать это только с опцией name 

import LinkRole from './LinkRole';
export default {
    name: 'link-role',
    components: {
        'link-role': LinkRole,
    },
    props: {
        collection: {
            type: [Object, Array],
            default: () => []
        }
    },
}
...