フロント Evaluationを作成

[kCat-fun]

Why

評価を星で表示するため。

What

評価値の合計と評価回数から平均を出す。

[kCat-fun]

undefinedエラーが出た'

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'evaluationSumValue')

propsで方も設定しているし大丈夫なはず... Appの方（pages直下） index.vue

<template>
    <div>
        <Evaluation :evaluation-sum-value="esv" :evaluation-count="ec"></Evaluation>
    </div>
</template>

<script>
export default {
    name: "App",
    data: ()=> {
        return {
            esv: 10,
            ec: 3,
        }
    }
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

Evaluation.vue

<template>
    <div>
        <div>
            <div><span v-for="n in evalIntValue" :key="n">★</span><span v-for="n in (5 - evalIntValue)" :key="n">☆</span></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Evaluation',
    props: {
        evaluationSumValue: {
            type: Number,
            required: true,
        },
        evaluationCount: {
            type: Number,
            required: true,
        }
    },
    data: () => {
        return {
            evalValue: this.evaluationSumValue / this.evaluationCount,
            evalIntValue: Math.floor(this.evaluationSumValue / this.evaluationCount),
        }
    },
    mounted() {
        console.log(this.evalIntValue);
    }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>

[kCat-fun]

return内の変数を見ている部分がダメなことは分かった

return {
    evalValue: this.evaluationSumValue / this.evaluationCount,
    evalIntValue: Math.floor(this.evaluationSumValue / this.evaluationCount),
}

[kCat-fun]

ちなみにthisを無くすとis not defienedで500エラーになる

[kCat-fun]

値の計算をmountedないで行うことで解決

[kCat-fun]

できた 使うとき

<Evaluation :evaluation-sum-value="Integerの値" :evaluation-count="Integerの値" />