Javascript 我能'；t正确显示v数据表数据：''；无效道具：道具的类型检查失败；项目"；。应为数组，已获取对象''；

我正在启动一个项目，其中我必须使用Vue。事实上，我对这一点还很陌生，所以我在不断地学习。我确实提前道歉，因为这个问题以前已经回答过了，但是，我并不真正理解提供的解决方案，这就是为什么我在这里问自己

嗯，我试图在我的数据表上显示一些数据（更具体地说，是Vuetify的v-data-Table）。我能够从API中获取数据，但由于某些原因，它没有显示任何内容。多亏了Vuex，我可以看到这种变异是有效的，因为在Google Chrome的控制台上，我可以看到对象数组。但正如我所说，它仍然没有向我展示桌子上的任何东西，它甚至说“没有可用的数据”。我得到的一些错误类似于“[Vue warn]：无效的属性：属性“items”的类型检查失败。应为数组、Get Object和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>

---

提前感谢。

您无法从vuex获得正确的

用户

，因为已命名，请更改为：

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

---

MapState帮助程序的工作方式与其他帮助程序不同，因为状态模块未在全局命名空间中注册。因此，模块名称空间将有所帮助，或者您可以这样做：

computed: { 
    ...mapState({
      users: state => state.FilenameOfYourModule.users
    })
}

---

谢谢，我刚试过，但是当我这么做的时候，所有的错误都消失了，但是另一个错误出现了：“属性或方法“users”不是在实例上定义的，而是在渲染过程中引用的。”。但仍然没有显示任何内容。好吧，尝试了一下，出于某种原因，现在它显示：呈现错误：“RangeError:超出了最大调用堆栈大小”。我不知道现在发生了什么。转到

…mapState（'users'，['users']），

你能打印出odf

这个值吗。users

？嗨，我终于能够修复它了。当你给我另一种调用它的方式时，我没有注意到的另一个错误弹出，它与getter有关，所以我基本上在我的users.js

export const getters={users:（state）=>{return state.users}，}

之后，在computed上，而不是在mapState上，我放了一个mapGetters:computed:{…mapGetters（'users'，['users']），}，非常感谢您的帮助！

computed: { 
    ...mapState({
      users: state => state.FilenameOfYourModule.users
    })
}