Vue.js maximum call stack size exceeded

Question

I'm following along this tutorial and for some reason I am getting a "maximum call stack error"

<template>
  <SearchInput></SearchInput>
</template>

<script>

import SearchInput from './components/SearchInput.vue'
export default {
  name: 'App',
  components:{
    SearchInput
  }

};
</script>

SearchInput.vue component file:

<template>
<SearchInput> 
    <input type="text">
</SearchInput>
</template>


<script>
export default {
    name: "SearchInput",
}
</script>

I tried giving the SearchInput its own name "SearchInputView": SearchInput but it didn't work. I'm using es6 syntax and this is a Vue 2 project. What am I doing wrong?

Fanoflix · Accepted Answer · 2022-03-29 11:52:10Z

7

Remove <SearchInput> tag from the component itself

Your SearchInput component's template should look like this.

SearchInput.vue

<template> 
    <input type="text">
</template>

You had the component itself being mounted inside itself, which resulted in a "maximum call stack error"

answered Mar 29, 2022 at 11:52

Fanoflix

2,1392 gold badges14 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Vue.js maximum call stack size exceeded

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related