Nuxt js超出最大调用堆栈大小

问题描述

祝您有美好的一天！刚开始研究Nuxtjs和Vue时遇到了这样的问题，最初加载页面时，所有内容均正常显示，但是一旦我重新启动，就会出现最大堆栈大小超出错误。我意识到问题是由于asyncData函数引起的，但是我正在做的事情理解不正确。请告诉我我错了。

<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"

解决方法

解决方案很简单。忘记获取$符号，然后修改周期。

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

v-for =“ getusers的用户”