очень простой компонент vue.js генерирует превышение максимального размера стека вызовов

Question

У меня есть очень простой компонент vue.js, который отображает список данных (2 объекта с 2 полями).

код компонента vue.js:

    <template>

    <div>

        <h1>Genre</h1>

        <b-container>
            <b-row>
                <b-col v-for="data in genre" v-bind:key="data.id" v-bind:title="data.name">
                    <b-card title="fefefe"
                            tag="genre"
                            style="max-width: 20rem;"
                            class="mb-2">
                    </b-card>
                </b-col>
            </b-row>
        </b-container>

    </div>

</template>

<script>

    export default
    {
        name: 'genre',

        data: function ()
        {
            return {
                genre: [
                    {id:1, name:'toto'},
                    {id:2, name:'tata'},
                ]
            }
        },
    }
</script>

<style scoped>

</style>

Но когда я отображал этот компонент, у меня появляется ошибка:

[Vue warn]: Ошибка в nextTick: «RangeError: Превышен максимальный размер стека вызовов»

IЯ не понимаю, почему мой цикл for вызывает ошибку, связанную с моими данными.У меня есть другой компонент, который получает данные по обещанию SQL (on mount ()), и я не генерирую эту ошибку.Более того, у меня есть больше данных для этого компонента, но нет ошибки стека вызовов.Это очень странно для меня.

Что за мелочь я забыл?

Answer 1

Проблема заключается в следующем:

• Вы определили компонент genre с name: "genre"
• tag="genre" в вашем b-card пытается использовать genre компонент как карта

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

Следующая песочница показывает, что если вы переименуете свой компонент, Vue будет жаловаться на несуществующий элемент genre, который он пытается загрузить.В противном случае вы получите максимальную ошибку стека вызовов.