CODEWITHSUNDEEP
vue.jsnuxt.js
nikit553
nikit553

Reputation: 31

Nuxt js Maximum call stack size exceeded

Good day to you! Just started to study Nuxtjs and Vue and encountered such a problem, when the page is initially loaded everything is displayed normally, but once I reboot it, I get a maximum stack size exceeded error. I realized that the problems arose because of the asyncData function, but what I’m doing is wrong to understand. Please tell me where I was wrong.

<template>
    <section>
        <h1>USERS</h1>

        <ul>
            <li v-for="user of getusers.data" :key="user.id" >
               <a href="#" @click.prevent="openUser(user.id)">{{ user.name }}</a>    
            </li>
        </ul>
    </section>
</template>

<script>
export default {
     async asyncData ({$axios}) {
        const getusers = await $axios.get('http://jsonplaceholder.typicode.com/users')
        
        return {getusers}
    },
     data: () => ({
      getusers: []  
    }),
    methods: {
        openUser(user) {
            this.$router.push('/users/' + user
            )
        }
    }
}
</script>

image "my error"

Upvotes: 2

Views: 3188

Answers (1)

nikit553
nikit553

Reputation: 31

The solution was simple. Forgot to put a $ sign before get and fix the cycle for.

   const getusers = await $axios.$get('http://jsonplaceholder.typicode.com/users')

v-for="user of getusers"

Upvotes: 1

Related Questions