时间戳

首页 > 解决方案 > this.items.slice 不是函数

vue.js - this.items.slice 不是函数

问题描述

嗨，我正在使用 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>

我希望让用户进入表格，我已经检查了邮递员中的 api，并且我得到了所有用户的正确响应。

标签： vue.jsvuetify.jsnuxt.js

解决方案

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

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.
  }

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

推荐阅读