Vue.jsのpropsで受け取った値がcomputedでNaNになってしまうのを直したい
Vue.jsで簡単な円グラフをコンポーネント単位で、v-forを使って作っています。
コンポーネントのdata()を配列で以下のように用意したのですが、computed内の円グラフを回転させるdeg()の値がNaNになってしまいます。
発生している問題・エラーメッセージ
deg()の値がNaNとなって出てくる
該当のソースコード
javascript
1(() =>{ 2 // スキルセットの円グラフ 3const list = Vue.createApp({}) 4 list.component(`circle-graph`,{ 5 data() { 6 return { 7 skills: [ 8 {id:0, name: 'HTML/CSS' ,percent:70}, 9 {id:1, name: 'javascript' ,percent:60}, 10 {id:2, name: 'git' ,percent:50}, 11 {id:3, name: 'vue.js' ,percent:40}, 12 ] 13 } 14 }, 15 props: { 16 per: Number 17 }, 18 computed:{ 19 deg() { 20 return 360*parseInt(this.per)/100 21 }, 22 rotate() { 23 return {transform: `rotate(` + this.deg + `deg)`} 24 } 25 }, 26 template:` 27 <div v-for="skill in skills"> 28 <div class="progress-pie-chart" :class='{"gt-50":skill.percent>50}'> 29 <div class="ppc-progress"> 30 <div class="ppc-progress-fill" :style="rotate" :per="skill.percent"></div> 31 </div> 32 <div class="ppc-percents"> 33 <div class="pcc-percents-wrapper"> 34 <span>{{skill.percent}}%</span> 35 <p>{{skill.name}}</p> 36 </div> 37 </div> 38 </div> 39 </div> 40 ` 41 }) 42 list.mount('#graph_skill') 43 44})();
試したこと
perに対して、初期化が足りないのかとdata()内で初期化を試したものの、全てのグラフに対して初期化の値が反映されてしまいます。
補足情報(FW/ツールのバージョンなど)
使用しているテキストエディタ:Vscode
使用しているブラウザ:GoogleChrom
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/13 14:42
2021/02/13 14:47