I want to add count course.length from api to each item option on v-select and show data to active based filter.
For example : Items in v-select contains options all(count), passed(count) which filtered from online.passed, not complete(count)
which filtered from online.complete, etc.
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
}
],
Few Observations in current code you posted :
online.complete === 100 but you don't have complete property in online object. Hence, corrected that to completed instead of complete.online.title expression.Now coming to the original problem :
To achieve the counts in the v-select options. You have to convert your items array from array of elements to array of objects.
items: ['All', 'passed', 'not complete']
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)
}]