Tambahkan kiraan (.panjang) setiap item dalam pilihan v-select

Question

Saya mahu menukar course.length 从 api 添加到 v-select 上的每个项目 option dan memaparkan data kepada penapis berasaskan aktiviti.

Contohnya: v-select 中的项目包含从 online.passed 过滤的选项 all(count)、passed(count)、notcomplete(count)

Tapis daripada online.complete dsb.

templat

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>

Jawapan 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
    }
],

Answer 1

Beberapa pemerhatian daripada kod semasa yang anda siarkan:

• Anda sedang menyemak online.complete === 100 但在线对象中没有 complete 属性。因此，将其更正为 completed 而不是 complete.
• online.title Hilang pendakap penutup dalam ekspresi.

Sekarang kembali kepada soalan asal:

Dalam v-select选项中实现计数。您必须将项目数组从 elements 数组转换为 objects array.

items: ['All', 'passed', 'not complete']

kepada

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