very simple vue.js component generate maximum call stack size exceeded

Question

I have a very simple vue.js component which display list of data (2 objects with 2 fields).

component vue.js code :

    <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>

But when I displayed this component I have a error :

[Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"

I don't understand why my loop "for" throws that error dealing with my few data. I have another component that retrieve data by SQL promise (on mounted()) and I don't generate this error. Moreover I have more data for this component but no call stack error. This is very strange for me.

What nicety I forget ?

Answer 1

The problem is the following:

• You defined a component genre with name: "genre"
• The tag="genre" in your b-card tries to use the genre component as the card

The result is that you are loading your own component recursively, who goes through the same loop and loads your component again. Until you hit the maximum stack size.

The following sandbox shows that if you rename your component, Vue will complain about a non-existent genre element that it tries to load. Otherwise you get your maximum call stack error.