如何使用 v-for 使多个 v-progress-linear，

Question

我想用 v-for 创建多个线性进度。我不能将 v-progress-linear 与 v-for 一起使用。我无法正确处理该对象。显示“NaN%”而不是百分比。

<div class="course__card" v-for="(myCourse, m) in myCourses" :key="m">

...

  <v-progress-linear
     class="rounded-xl"
    :v-model="myCourse.subject"
    height="35"
    width="200"
    background="#F2F2F2"
    color="#83D2B7"
  >
    <strong>{{ Math.ceil(myCourse.subject) }}%</strong>
  </v-progress-linear>

...

</div>

export default {
  data: () => ({
    art: 46,
    maths: 11,
    rating: 4.5,
    myCourses: [
      { img: require('@/assets/course-art-mini.png'), name: 'Rassomchilik', subject: 'art'},
      { img: require('@/assets/course-maths-mini.png'), name: 'Matematikadan oliy ta’lim muassalari uchun tayyorgarlik kursi', subject: 'maths' }
    ],
  })
}

提前致谢。

Answer 1

您在 myCourse.subject 上调用 Math.ceil()，它在您的数据中似乎是一个字符串（而不是数字，因此 NaN%）。

否则，这看起来不错并且应该可以工作

Answer 2

Bilal Beograd 感谢您的回复。我明白。我更改了代码，一切正常。

<v-progress-linear
  class="rounded-xl"
  :v-model="myCourse.subject"
  height="35"
  width="200"
  background="#F2F2F2"
  color="#83D2B7"
  >
  <template v-slot="{ value }">
    <strong>{{ Math.ceil(value) }}%</strong>
  </template>
</v-progress-linear>

export default {
  data: () => ({
    myCourses: [
      {
        img: require("@/assets/course-art-mini.png"),
        name: "Rassomchilik",
        subject: "46",
      },
      {
        img: require("@/assets/course-maths-mini.png"),
        name: "Matematikadan oliy ta’lim muassalari uchun tayyorgarlik kursi",
        subject: "11",
      },
    ],
  })
}

如何使用 v-for 使多个 v-progress-linear，

How to make multiple v-progress-linear with v-for,

javascript

vue.js

v-for

vuetify.js