this.items.slice不是一个函数

Question

嗨，我正在学习与vuetify的vue，我正在尝试从Axios的后端api获取用户。

问题是我得到this.items.slice不是函数错误

这是我在index.vue页面中尝试的内容

<script>
  /* import { Items as Users } from '@/api/user' */

  export default {
    data() {
      return {
        search: '',
        users:[],
        complex: {
          selected: [],
          headers: [
            {
              text: 'Avatar',
              value: 'avatar'
            },
            {
              text: 'Name',
              value: 'name'
            },
            {
              text: 'Email',
              value: 'email'
            },
            {
              text: 'Phone',
              value: 'phone'
            },
            {
              text: 'Action',
              value: ''
            }
          ]
          /* items: Users */
        }
      }
    },
    async asyncData({ $axios }) {
      const users= await $axios.$get('http://localhost:3333/api/users')
      return { users}
    }
  }
</script>

我期待让用户进入桌面，我已经检查了postman中的api，并且我得到了所有用户的正确回复。

Answer 1

首先，从数据功能中删除用户：

export default {
    data() {
      return {
        search: '',
        // users:[], delete this line
        complex: {
...

您不应该在数据函数中返回您想要的asyncData。 asyncData会把它放在那里。

然后像这样尝试你的asyncData：

async asyncData () {
    let { data } = await axios.get('http://localhost:3333/api/users')
    return { users: data.users } //or however your 'data' comes back. Try console.log(data) to see.
  }

您当前返回“用户”的方式将是一个比用户数据更复杂的对象，因此您应该更改它以仅返回所需的信息。

Answer 2

您没有数据对象的课程属性。在返回数据对象中添加courses / users属性。无论如何，我建议这样做：添加一个方法属性，添加你的asynData函数来获取异步信息。添加创建的生命周期，并执行this.courses = this.asyncData（）。

Answer 3

您似乎使用API​​ users请求http://localhost:3333/api/users，但是，您将数据变量名称设置为courses，它也在模板中使用。

所以，我猜测问题在于你试图在模板中显示的方式。您可以共享CodeSandbox或repo，以便我们更好地了解您的问题吗？

谢谢！

编辑：Axios通常返回一个response对象，它看起来像：

{
  status: 200,
  data: {/*some object */}
}

也许你需要做类似的事情：

      const response = await $axios.$get('http://localhost:3333/api/users')
      console.log(response); // Just to check what response looks like
      return { users: response.data }