使用VUETIFY应用程序中的VUEX和AXIOS不会显示api数据

问题描述

我正在尝试使用VUEX和AXIOS呈现来自我的API的数据，但是在我的屏幕上没有显示任何图像，如图所示：

但是在console.log中，数据出现：

在Vue开发工具中，它显示如下：

我尝试了不同的方法，但是由于我的经验不足，所以我没有成功，我需要帮助。

遵循我的代码：

Clients.vue

<template>
  <!-- Inicio do CONTAINER principal -->
  <v-container fluid>
        <v-row
          justify="center"
        >
          <!-- Inicio do BLOCO principal -->
          <v-col
            md="9"
            xs="12"
          >
            <nav-bar />
              <v-card
                class="mx-auto"
                flat
                height="900"
              >
                <v-list-item three-line>
                  <v-list-item-content>
                    <v-list-item-title class="display-1 font-weight-black">{{ pageName }}</v-list-item-title>
                  </v-list-item-content>

                  <!-- Inicio BLOCO button actions -->
                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                      color="success"
                      depressed
                      large
                    >
                      New Client
                    </v-btn>
                  </v-card-actions>
                  <!-- Final BLOCO button actions -->

                </v-list-item>
                
                <!-- Inicio COMPONENTE TAB -->
                <v-card
                  flat
                  tile
                >
                  <v-col>
                    <v-tabs>
                      <v-tab class="text-capitalize">Search</v-tab>
                      <v-tab class="text-capitalize">Dashboard</v-tab>
                      <v-tab-item>
                        <v-divider></v-divider>
                        <!-- Início BLOCO Table-->
                        <v-card
                          flat
                          tile
                        >
                          <v-col
                            justify="center"
                          >
                              <v-col
                                md="5"
                              >
                                <v-text-field
                                  v-model="search"
                                  append-icon="mdi-magnify"
                                  label="Search"
                                  single-line
                                  outlined
                                  dense
                                  class="pt-3"
                                ></v-text-field>
                              </v-col>
                            <v-data-table
                              :headers="headers"
                              :items="clients"
                              :search="search"
                            ></v-data-table>
                          </v-col>
                        </v-card>
                        <!-- Final BLOCO Table-->
                      </v-tab-item>
                    </v-tabs>
                  </v-col>
                </v-card>
                <!-- Final COMPONENTE TAB -->
              </v-card>
          </v-col>
          <!-- Final do BLOCO principal -->
        </v-row>
  </v-container>
  <!-- Final do CONTAINER principal -->
</template>

<script>
import { mapState} from 'vuex'; 

const state = mapState(['clients']);

export default {
    name: 'Clients',computed: state,data: () => ({
      pageName: 'Clients',search: '',headers: [
          { text: 'Name',value: 'firstName' },{ text: 'Phone',value: 'phone' },{ text: 'E-mail',value: 'email' },],}),created () {
      this.initialize()
    },methods: {
      initialize () {
        //console.log(this.$store)
        this.$store.dispatch('loadData') // dispatch loading
      },},}
</script>

store / modules / client.module.js

import axios from 'axios'

const URL = 'http://192.168.15.11:3000/clients';
const client = {
  state: () => ({
    clients: [],loading: true
  }),mutations: {
    updateClients(state,clients) {
      state.clients = clients
    },changeLoadingState(state,loading) {
      state.loading = loading
    }
  },actions: {
    loadData({commit}) {
      axios.get(URL).then((response) => {
        console.log(response.data,this)
        commit('updateClients',response.data)
        commit('changeLoadingState',false)
      })
    }
  },getters: {
    //
  }
}

export default client;

store / index.js

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth.module'
import client from './modules/client.module'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    auth:auth,client:client,})

注意：身份验证部分在这种形式的存储模块中正常工作

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）