I want to add course.length from the api to each item on v-select and display the data to an activity based filter .
Items in v-select contain options all(count), ## filtered from online.passed #passed(count)、notcomplete(count)
Filter from online.complete
vue.js template:
<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>
Response 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
}
], 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Some observations from the current code you posted:
online.complete === 100but there is nocompleteproperty in the online object. So correct it tocompletedinstead ofcomplete.online.titleThe closing brace is missing in the expression.Now back to the original question:
Implement counting in the
v-selectoption. You have to convert the items array from anelementsarray to anobjectsarray.to
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) }]