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 ?

Sumurai8 · Accepted Answer · 2019-01-31 18:10:22Z

5

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.

answered Jan 31, 2019 at 18:10

Sumurai8

20.8k11 gold badges70 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

miltone Over a year ago

name of component become a keyword for his template...Ok I keep this information in my mind.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related