javascript - 我无法正确显示 v-data-table 数据 : '' Invalid prop: type check failed for prop "items". 预期数组，得到对象''

Question

我正在开始一个必须使用 Vue 的项目。我实际上对此很陌生，所以我在旅途中学习。我提前道歉，因为这个问题之前已经回答过，但是，我并没有真正理解所提供的解决方案，这就是我在这里问自己的原因。

嗯，我试图在我的数据表(更具体地说，来自 Vuetify 的 v-data-table)上显示一些数据。我能够从 API 获取数据，但由于某种原因它没有显示任何内容。多亏了 Vuex，我可以看到突变起作用了，因为在 Google Chrome 的控制台上我可以看到对象数组。但正如我所说，它仍然没有向我展示桌面上的任何东西，它甚至说“没有可用数据”。我得到的一些错误是像'[Vue warn]: Invalid prop: type check failed for prop "items"这样的错误。预期数组，得到对象”和“TypeError:this.items.slice 不是函数”。

这是来自 List.vue 的代码

<template>
  <v-container id="data-tables" tag="section">
    <div class="text-right">
      <v-btn class="mx-2" fab dark color="primary" :to="{ name: 'UserCreate' }">
        <v-icon dark>mdi-plus</v-icon>
      </v-btn>
    </div>
    <base-material-card
      color="indigo"
      icon="mdi-vuetify"
      inline
      class="px-5 py-3"
    >
      <template v-slot:after-heading>
        <div class="display-2 font-weight-light">
          Lista de Empleados
        </div>
      </template>

      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        class="ml-auto"
        label="Search"
        hide-details
        single-line
        style="max-width: 250px;"
      />

      <v-divider class="mt-3" />

      <v-data-table
        :headers="headers"
        :items="users"
        :search.sync="search"
        :sort-by="['name', 'office']"
        :sort-desc="[false, true]"
        multi-sort
      >
        <template v-slot:item.actions="{ item }">
          <v-icon small class="mr-2" @click="editItem(item)">
            mdi-eye
          </v-icon>
          <v-icon
            small
            class="mr-2"
            @click="editItem(item)"
            :to="{ name: 'UserUpdate' }"
          >
            mdi-pencil
          </v-icon>
          <v-icon small @click="deleteItem(item)">
            mdi-delete
          </v-icon>
        </template>
      </v-data-table>
    </base-material-card>
  </v-container>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'UsersTable',
  data() {
    return {
      headers: [
        {
          text: 'Nombre',
          value: 'empleado.nombre',
        },
        {
          text: 'Apellido',
          value: 'empleado.apellido',
        },
        {
          text: 'Dirección',
          value: 'empleado.direccion',
        },
        {
          text: 'Correo Electrónico',
          value: 'email',
        },
        {
          text: 'Teléfono',
          value: 'empleado.telefono',
        },
        {
          sortable: false,
          text: 'Actions',
          value: 'actions',
        },
      ],
      loader: true,

      search: undefined,
    }
  },

  created() {
    this.$store.dispatch('users/fetchUsers')
  },
  computed: {
    ...mapState(['users']),
  },
  methods: {},
  mounted() {},
}
</script>

以及来自 user.js 的代码，它来自 fetchUsers。

import auth from '@/api/auth'

export const namespaced = true

export const state = {
  users: [],
}

export const mutations = {
  SET_USERS(state, users) {
    state.users = users
  },
}

export const actions = {
  fetchUsers({ commit, dispatch }) {
    auth
      .getAllAccounts()
      .then((response) => {
        commit('SET_USERS', response.data)
      })
      .catch((error) => {
        const notification = {
          type: 'error',
          message: 'There was a problem fetching users: ' + error.message,
        }
        dispatch('notification/add', notification, { root: true })
      })
  },
}

提前致谢。

Answer 1

您没有从 vuex 获得正确的 user，因为它是命名空间，更改为:

computed: {
  ...mapState('users',['users']),
},