Question

我正在模型中进行ajax调用。响应存储在我的Vuex状态中。我的模板正在使用使用吸气剂的状态。但是吸气剂返回一个“观察者”。

因此，我的模板未在数据表中显示任何内容。

模型：usage.js

export const getUsageFiles = async () => {
  const path = '/usage/files/';

  return (await rest.request(path)).body;
};

Store：UsageFiles.js

import {
  prop,
} from 'ramda';

state: {
    usageFiles: [],
},

getters: {
    usageFiles: prop('usageFiles'),
},

mutations: {
    updateUsageFiles(state, { file }) {
      state.usageFiles = file;
    },
},

actions: {
    async getUsageFiles() {
      let usageFile = [];

      usageFile = await usage.getUsageFiles();

      commit({
        file: usageFile,
        type: 'updateUsageFiles',
      });
    }
},

Vue：Usage.vue

data() {
    return {
      headers: ['A', 'B'],
    };
},

methods: {
    ...mapActions('usageFiles', [
      'getUsageFiles',
    ]),
}

computed: {
    ...mapGetters('usageFiles', [
      'usageFiles',
    ]),
},

async created() {
    await this.getUsageFiles();
    console.log('Getter : ', this.usageFiles); // Here it is the getter returning "observer"
}

HTML模板：

v-data-table.data-table__body(
    v-if="usageFiles.length",
    :headers="headers",
    :items="usageFiles",
    :hide-headers="!usageFiles.length",
    :pagination.sync="pagination",
    :rows-per-page-items="paginationOptions",
    :loading="tableIsLoading",
)

此处未显示“ usageFiles”，因为它是在console.log中检查的“观察者”（我没有编写模板代码的其余代码，因为它太长了）。

如何在我的数据表模板中呈现由getter返回的Observer

0 个答案: