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

Question

I want to create multiple Progress linear with v-for. I cannot use v-progress-linear with v-for. I can't address the object properly. "NaN%" is displayed instead of the percentage.

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

Thanks in advance.

Answer 1

You are calling Math.ceil() on myCourse.subject which appears to be a string (and not a number, hence NaN%) in your data.

Otherwise, this looks good and it should work