我想將course.length
從api 新增到v-select
上的每個項目option
並將資料顯示到基於活動的篩選器。
例如: v-select
中的項目包含從online.passed
過濾的選項all(count)
、passed(count)
、notcomplete(count)
從 online.complete
等過濾。
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>
回應 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 } ],
P粉7879344762024-04-01 10:42:39
您發布的當前程式碼中的一些觀察結果:
online.complete === 100
但線上物件中沒有 complete
屬性。因此,將其修正為 completed
而不是 complete
。 online.title
表達式中缺少右大括號。 現在回到原來的問題:
在v-select
選項中實作計數。您必須將專案陣列從 elements
陣列轉換為 objects
陣列。
items: ['All', 'passed', 'not complete']
至
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) }]