如何将输入字段中的动态值传递给vue-circle组件的progress prop

Question

我正在使用 vue-circle 来显示用户将输入字段的 throw v-modal 传递给 vue-circle 组件的技能和技能级别，但是当我输入值时，我不断收到此错误80：

[Vue warn]: Invalid prop: type check failed for prop "progress". Expected Number with value 80, got String with value "80".

这就是我传递值的方式：

<vue-circle
      v-for="(skill, index) in skills"
      :key="index"
      :progress= "skill.level"
      :size="130"
      :reverse="false"
      line-cap="round"
      :fill="fill"
      empty-fill="rgba(0, 0, 0, .3)"
      :animation-start-value="0.0"
      :start-angle="0"
      insert-mode="append"
      :thickness="12"
      :show-percent="false"
    >
     <span>{{ skill.skillName }}</span>
</vue-circle>

这是我输入数据的输入：

<div class="form-row" v-for="(skill, i) in skills" :key="i">
     <div class="form-group col-md-7">
                <label for="skill">skill</label>
                <input
                type="text"
                class="form-control"
                id="skill"
                placeholder="Skill"
                v-model.lazy="skill.skillName"
              />
            </div>
            <div class="form-group col-md-5">
              <label for="languageLevel">Level</label>
              <input
                type="text"
                pattern="\d*"
                minlength="2"
                maxlength="3"
                class="form-control"
                id="skillLevel"
                placeholder="Skill Level"
                v-model="skill.level"
              />

Answer 1

尝试使用输入 type="number"，问题是 type="text" 正在返回，但字符串 progress prob 需要一个数字。或者您仍然可以使用 parseInt(string, radix) 方法将值转换为数字