매우 단순한 vue.display 컴포넌트가 최대 콜스택 크기를 초과했습니다.

매우 단순한 vue.display 컴포넌트가 최대 콜스택 크기를 초과했습니다.

데이터 목록을 표시하는 매우 단순한 vue.js 컴포넌트가 있습니다(2개의 필드가 있는 2개의 객체).

컴포넌트 vue.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>

그러나 이 컴포넌트를 표시했을 때 다음과 같은 오류가 발생합니다.

[Vue warn] :nextTick 오류: "RangeError: Maximum Call Stack size exceededed"

몇 가지 데이터를 처리할 때 왜 루프가 오류를 발생시키는지 이해할 수 없습니다.(mounted() 상에서) SQL 약속으로 데이터를 가져오는 다른 컴포넌트가 있어 이 에러는 발생하지 않습니다.또한 이 컴포넌트에 대한 추가 데이터는 있지만 콜 스택에러는 없습니다.이것은 나에게 매우 낯설다.

내가 잊은 게 뭐가 있어?

문제는 다음과 같습니다.

• 구성 요소를 정의했습니다.genre와 함께name: "genre"
• 그tag="genre"당신의 안에서b-card를 사용하려고 합니다.genre카드로서의 컴포넌트

그 결과 사용자는 자신의 컴포넌트를 재귀적으로 로드하게 됩니다.이 컴포넌트는 같은 루프를 거쳐 다시 로드됩니다.스택 사이즈가 최대가 될 때까지.

다음 샌드박스는 컴포넌트의 이름을 변경하면 Vue가 존재하지 않는다고 불평하는 것을 보여줍니다.genre로드하려고 하는 요소.그렇지 않으면 콜 스택의 최대 에러가 발생합니다.

언급URL : https://stackoverflow.com/questions/54466638/very-simple-vue-js-component-generate-maximum-call-stack-size-exceeded