v-data-table 데이터를 제대로 표시할 수 없습니다. "잘못된 제안: "항목"에 대한 형식 검사에 실패했습니다.어레이가 필요하지만 오브젝트가 있습니다."

v-data-table 데이터를 제대로 표시할 수 없습니다. "잘못된 제안: "항목"에 대한 형식 검사에 실패했습니다.어레이가 필요하지만 오브젝트가 있습니다."

Vue를 사용해야 했던 프로젝트를 시작합니다.저는 사실 이런 거 처음이라서 이동하면서 배우고 있어요.이전에 이 질문에 답한 적이 있기 때문에 미리 사과드립니다만, 저는 제공된 해결책을 잘 이해하지 못했기 때문에 스스로 질문하게 되었습니다.

데이터 테이블(구체적으로는 Vuetify의 v-data-table)에 데이터를 표시하려고 했습니다.API에서 데이터를 얻을 수 있었습니다만, 왠지 아무것도 표시되지 않습니다.Vuex 덕분에 Google Chrome 콘솔에서 객체 어레이를 볼 수 있기 때문에 변환이 작동한 것을 알 수 있습니다.하지만 말씀드렸듯이, 테이블에는 아무것도 표시되지 않고, '사용 가능한 데이터가 없습니다'라고 표시되어 있습니다.[Vue warn]와 같은 오류가 표시됩니다.잘못된 소품: 소품 "항목"에 대한 형식 검사에 실패했습니다.어레이가 필요하지만 오브젝트가 있습니다' 및 'TypeError: this.items'가 필요합니다.슬라이스가 함수가 아닙니다.'

여기 리스트의 코드가 있습니다.표시하다

<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 })
      })
  },
}

잘 부탁드립니다.

정답을 못 맞췄어요uservuex에서 nameshorized로 변경:

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

상태 모듈이 글로벌네임스페이스에 등록되어 있지 않기 때문에 MapState 도우미는 다른 도우미와 동일하게 동작하지 않습니다.따라서 모듈을 네임스페이스로 배치하면 도움이 되거나 다음과 같이 할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/61879681/i-cant-display-properly-v-data-table-data-invalid-prop-type-check-failed-fo