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

ponent 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 ponent 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 ponent that retrieve data by SQL promise (on mounted()) and I don't generate this error. Moreover I have more data for this ponent but no call stack error. This is very strange for me.

What nicety I forget ?

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

ponent 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 ponent 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 ponent that retrieve data by SQL promise (on mounted()) and I don't generate this error. Moreover I have more data for this ponent but no call stack error. This is very strange for me.

What nicety I forget ?

• javascript
• vue.js
• vuejs2
• vue-ponent

1 Answer 1

The problem is the following:

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

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

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