Vue.jsのpropsで受け取った値がcomputedでNaNになってしまうのを直したい

Question

Vue.jsのpropsで受け取った値がcomputedでNaNになってしまうのを直したい

Vue.jsで簡単な円グラフをコンポーネント単位で、v-forを使って作っています。
コンポーネントのdata()を配列で以下のように用意したのですが、computed内の円グラフを回転させるdeg()の値がNaNになってしまいます。

発生している問題・エラーメッセージ

deg()の値がNaNとなって出てくる

該当のソースコード

(() =>{
  // スキルセットの円グラフ
const list = Vue.createApp({})
  list.component(`circle-graph`,{
    data() {
      return {
        skills: [
          {id:0, name: 'HTML/CSS' ,percent:70}, 
          {id:1, name: 'javascript' ,percent:60},
          {id:2, name: 'git' ,percent:50},
          {id:3, name: 'vue.js' ,percent:40},
        ]
      }
    },
    props: {
      per: Number
    },
    computed:{
      deg() {
        return 360*parseInt(this.per)/100
      },
      rotate() {
        return {transform: `rotate(` + this.deg + `deg)`}
      }
    },
    template:`
    <div v-for="skill in skills">
      <div class="progress-pie-chart" :class='{"gt-50":skill.percent>50}'>
        <div class="ppc-progress">
          <div class="ppc-progress-fill" :style="rotate" :per="skill.percent"></div>
        </div>
        <div class="ppc-percents">
          <div class="pcc-percents-wrapper">
            <span>{{skill.percent}}%</span>
            <p>{{skill.name}}</p>
          </div>
        </div>
      </div>
    </div>
    `
  })
  list.mount('#graph_skill')

})();

試したこと

perに対して、初期化が足りないのかとdata()内で初期化を試したものの、全てのグラフに対して初期化の値が反映されてしまいます。

補足情報（FW/ツールのバージョンなど）

使用しているテキストエディタ：Vscode
使用しているブラウザ：GoogleChrom

Answer 1

propsのperに初期値が設定されていないからだと思われます。
初期値は以下のようにdefaultを用いて設定できます。

props: {
  per: {
    default: 0,
    type: Number
  }
}

Comments

[umeda-yuu]

ご回答ありがとうございます！
初期値を上記のように設定してみたのですが、やはり全ての円グラフの回転する角度が初期値のものになってしまい、deg( ) = 0になってしまうようです。。。

[umeda-yuu]

よく考えたら、これはまた別の質問でしたね！すいません！
NaNになってしまう問題は解決できました！ありがとうございます！

Answer 2

    props: {
      per: Number
    },

と、perにNumberという関数を指定してしまっているのが原因ではないでしょうか？

Comments

[umeda-yuu]

ご回答ありがとうございます。
こちらの記述は、propsのperにバリデーションをつけてみた記述でして…
以下に習ってやってみました。
https://v3.ja.vuejs.org/guide/component-props.html#%E3%83%95%E3%82%9A%E3%83%AD%E3%83%8F%E3%82%9A%E3%83%86%E3%82%A3%E3%81%AE%E5%9E%8B

試しに

props : ['per']

とやってみたのですが結果変わらずでした…

[maisumakun]

となると、単純に「perを指定していないからundefinedになっている」ということは考えられませんか？

[umeda-yuu]

template内で
<div class="ppc-progress-fill" :style="rotate" :per="skill.percent"></div>
としてv-bindを使用してper自体は指定しているみたいです
追記
初期値を設定してみると、NaNではなくなりました！