javascript - 刷新时的VueJs没有运行axios

问题描述

我的 VueJs 应用程序有一些问题。我从 ThemeForest 购买了 Vuexy 模板。所以我创建了新的组件调用者 CountryTable.vue，它实际上可以工作，但是当我刷新页面时它不起作用，只有当我登录或更改另一个页面时，但是当我刷新它时显示该表是空的。以下是 CountryTable 的样子：

<template>
<div class="vx-col w-full">
<vx-card title="Countries">
<div slot="no-body" class="mt-4">

  <vs-table class="table-dark-inverted" :data="activeCountries">
    <template slot="thead">
      <vs-th sort-key="name" colspan="2">Country</vs-th>
      <vs-th sort-key="sales">Sales</vs-th>
      <vs-th sort-key="products">Products</vs-th>
      <vs-th sort-key="accessories">Accessories</vs-th>
      <vs-th sort-key="basket">Basket</vs-th>
      <vs-th sort-key="deliveries">Deliveries</vs-th>
      <vs-th sort-key="amount">Amount</vs-th>
    </template>

    <template slot-scope="{data}" class="text-center">
      <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" :style="{animation: 'flipInX ' +  (indextr * 0.2) + 's'}">

        <vs-td :data="data[indextr].name">
        <img width="30" :src="data[indextr].flag" :alt="data[indextr].name">
        </vs-td>

        <vs-td :data="data[indextr].name">
          {{ data[indextr].name }}
        </vs-td>

        <vs-td :data="data[indextr].sales">
          {{ data[indextr].sales }}
        </vs-td>

        <vs-td :data="data[indextr].products">
          {{ data[indextr].products }}
        </vs-td>

        <vs-td :data="data[indextr].accessories">
          {{ data[indextr].accessories }}
        </vs-td>
        
        <vs-td :data="data[indextr].basket">
          {{ data[indextr].basket }}
        </vs-td>

        <vs-td :data="data[indextr].deliveries">
          {{ data[indextr].deliveries }}
        </vs-td>

        <vs-td :data="data[indextr].amount">
          {{ data[indextr].amount }}
        </vs-td>

      </vs-tr>
    </template>
    </vs-table>
</div>
    </vx-card>
    
    </div>
</template>

<script>
import { mapState } from "vuex";
import Countries from "../../http/Countries";

export default {
  data() {
    return {
      selected: [],
      'tableList': [
        'vs-th: Component',
        'vs-tr: Component',
        'vs-td: Component',
        'thread: Slot',
        'tbody: Slot',
        'header: Slot'
      ]
    }
  },
  computed: {
            ...mapState({
              activeCountries: state => state.activeCountries
            })
        },

  mounted() {
      Countries.activeCountries().then(response => {
        this.$store.commit("ACTIVE_COUNTRIES", response.data.countries);
      });
  }
}

</script>

国家文件如下所示：

activeCountries() {
    return Api().get("/userCountries");
  },

这是API：

import axios from "axios";

let BaseApi = axios.create({
  baseURL: "http://127.0.0.1:8000/api/"
});

let Api = function() {
  let token = localStorage.getItem("accessToken");

  if (token) {
    BaseApi.defaults.headers.common["Authorization"] = `Bearer ${token}`;
  }

  return BaseApi;
};

export default Api;

在控制台中我有如下错误：

TypeError：传播不可迭代实例的无效尝试

如您所见，我创建了一个简单的表，称为函数，它实际上是与 axios 请求的链接并映射了它们。挂载功能有问题吗？我尝试创建和更新但没有成功。

标签： javascriptvue.js

javascript - 刷新时的VueJs没有运行axios

问题描述

解决方案

推荐阅读