搜尋

首頁  >  問答  >  主體

在 v-select 的選項中加入每個項目的計數(.length)

我想將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粉197639753P粉197639753233 天前495

全部回覆(1)我來回復

  • P粉787934476

    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)
          }]

    回覆
    0
  • 取消回覆