我想将 course.length 从 api 添加到 v-select 上的每个项目 option 并将数据显示到基于活动的过滤器。
例如： v-select 中的项目包含从 online.passed 过滤的选项 all(count)、passed(count)、notcomplete(count)
从 online.complete 等过滤。
vue.js 模板：
1
977<template>
<v-select
v-model="filter"
:items="items"
></v-select>
<v-card v-for="online in onlineCourse" :key="online.id">
<v-card-title>{{online.title}</v-card-title>
<p v-if="online.complete === 100">{{online.complete}}%</p>
<p v-else-if="online.complete < 100 && online.complete > 0">{{online.complete}}%</p>
<p v-else>{{online.complete}}%</p>
</v-card>
</template>
<script>
data () {
return {
onlineCourse: [],
filter: 'All',
items: [
'All',
'passed',
'not complete',
],
}
}
method: {
async getDataOnline () {
try {
const request = await Axios.get('v1/courses')
this.onlineCourse = request.courses
} catch (error) {
console.log(error.message);
}
}
}
</script>
响应 JSON：
"courses": [
{
"id": 1,
"title": "title1",
"passed": false,
"completed": 0
},
{
"id": 2,
"title": "title2",
"passed": true,
"completed": 100
},
{
"id": 3,
"title": "title3",
"passed": false,
"completed": 50
}
], 
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
您发布的当前代码中的一些观察结果：
online.complete === 100但在线对象中没有complete属性。因此，将其更正为completed而不是complete。online.title表达式中缺少右大括号。现在回到原来的问题：
在
v-select选项中实现计数。您必须将项目数组从elements数组转换为objects数组。至
items: [{ name: 'All', count: this.onlineCourse.length }, { name: 'passed', count: this.onlineCourse.filter((course) => course.passed) }, { name: 'not complete', count: this.onlineCourse.filter((course) => course.completed === 0) }]