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

问题描述

我想用v-for创建多个Progress线性。我不能将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' }
    ],})
}

谢谢。

解决方法

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

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

,

Billal Begueradj感谢您的重播。我明白。我更改了代码，一切顺利。

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