Quiero agregar contar course.length de api a cada option de elemento en v-select y mostrar datos al filtro basado en activo.
Por ejemplo: los elementos en v-select contienen opciones all(count) , passed(count) que se filtraron desde online.passed , not complete(count)
que se filtró desde online.complete , etc.
plantilla vue.js:
<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>Respuesta 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 } ],Pocas observaciones en el código actual que publicaste:
online.complete === 100 pero no tiene la propiedad complete en el objeto en línea. Por lo tanto, se corrigió para completed en lugar de complete .online.title .Ahora llegando al problema original:
Para lograr los conteos en las opciones v-select . Tienes que convertir tu matriz de elementos de una array of elements a una array of objects .
items: ['All', 'passed', 'not complete']a
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) }]