如何用v-for创建多个v-progress-linear？解决NaN%显示异常问题

嘿，我一眼就发现问题所在了！你的进度条显示NaN%主要是两个小错误导致的：

1. 数据绑定逻辑偏差 #

你在myCourses数组里的subject字段存的是字符串（'art'、'maths'），但实际需要的是对应data里的数值变量art（46）、maths（11）。当你执行Math.ceil(myCourse.subject)时，本质是对字符串做数学运算，结果自然会是NaN。

2. 指令使用格式错误 #

模板里的:v-model写法不对——v-model本身就是Vue的双向绑定指令，不需要加冒号（冒号是用于普通属性绑定的，比如:value），加了冒号反而会把它当成普通属性处理，导致绑定失效。

两种解决方案任你选： #

方案一：直接在数组里存数值（最简单直接）

修改data里的myCourses数组，把subject换成对应的进度数值：

export default {
  data: () => ({
    art: 46,
    maths: 11,
    rating: 4.5,
    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-model写法：

<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>

方案二：保留原变量，通过属性名动态取值

如果你想继续保留art、maths这些独立变量，可以通过$data[属性名]的方式在模板里动态获取对应数值：

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

这里的$data[myCourse.subject]会根据字符串'art'自动取到data里的art变量值46，'maths'对应11，完美解决字符串转数值的问题。

两种方案都能让进度条正常显示百分比，选你觉得更贴合业务需求的就行！

内容的提问来源于stack exchange，提问作者Sanjar Barakayev