I am currently using vue-circle to showcase a user's skill and the skill level, passing the value through v-modal of an input field to the vue-circle component. However, I am encountering an error when entering a value of 80:
[Vue warn]: Invalid prop: type check failed for prop "progress". Expected Number with value 80, got String with value "80".
This is how I am passing the values:
<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>
Here is the input field where the data is entered:
<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"
/>