Vue.js 计算百分比时出错，但代码有效

我有和平的代码，以获得积极的项目计数

created() {
        this.loadData();
    },

methods: {
        ...mapActions([
            'fetchProjects'
        ]),

        loadData() {
            if(this.$gate.isAdmin()) {
                this.fetchProjects();
                this.projects = this.$store.state.projects;
            }
        },
    },

computed: {
    filteredProjects() {
            let result = this.projects.projects;

            return result.filter(item => {
                return item.finished === 0
            });
        }

    },

我的Vuex项目代码：

const actions = {
    async fetchProjects ({ commit }) {
        const response = await axios.get('api/project');
        commit('setProjects', response.data)
    },
};

const mutations = {
    setProjects: (state, projects) => (state.projects = projects),
};

<div class="inner">
    <h3>{{ projects.projects.length }}</h3>
        <p>Total Projects</p>
    <h3>{{ filteredProjects.length }} - {{ parseInt(filteredProjects.length/projects.projects.length*100) }}
    <sup style="font-size: 20px">%</sup>
    </h3>
    <h5>Active projects</h5>
</div>

然后我要计算活动项目的百分比：

const actions = {
    async fetchProjects ({ commit }) {
        const response = await axios.get('api/project');
        commit('setProjects', response.data)
    },
};

const mutations = {
    setProjects: (state, projects) => (state.projects = projects),
};

<div class="inner">
    <h3>{{ projects.projects.length }}</h3>
        <p>Total Projects</p>
    <h3>{{ filteredProjects.length }} - {{ parseInt(filteredProjects.length/projects.projects.length*100) }}
    <sup style="font-size: 20px">%</sup>
    </h3>
    <h5>Active projects</h5>
</div>

---

这意味着，当您在结果中使用函数filteredProjects时，您没有数组（可能未定义），请在使用result.filter之前插入console.log（result）并检查结果中的内容。

在

data（）

函数中，添加一个空数组的默认值：

data() { 
  return {
    this.projects = {};
    this.projects.projects = [];
  }
},

---

这样，当您的

This.projects.projects

尚未填充时，执行

数组.prototype

方法的代码不会出错。

好的，我已成功清除错误：

在data（）中添加了ActiveProject:[]

然后在计算中：

filteredProjects() {
        let result = this.projects.projects;
        this.activeProject = result.filter(item => {
            return item.finished === 0
        });
    }

},

最后

<h3>{{ this.activeProject.length }} - {{ parseInt(this.activeProject.length/projects.projects.length*100) }}

{{this.activeProject.length}-{{parseInt（this.activeProject.length/projects.projects.length*100）}

当代码第一次运行时，this.projects.projects

似乎还没有定义。我在created（）中定义this.projects.projects，那么解决方案是什么？您如何定义它？请用相应的代码更新问题。console.log（结果）给我3件事：对象，然后是提到的错误，然后是数组你能添加你的vuex代码吗？当您使用fetchProjects时，这是一个异步函数，执行此函数后，您将执行此字符串this.projects=this.$store.state.projects，在存储中您没有数据，因为您的异步调用尚未完成。我有this.projects:[]；在我的数据（）中：(