vue js computed method

Question

I'm pretty new with Vue and Js and I'm a bit confused with computed methods. So as follows I create a props to share data from the parent component. Everything works but when the sumTotal method its executed as a default value its displaying Nan on the {{sumTotal}}. I would like to know how I can render an int 0 as a default value for sumTotal value.

     //parent component
     <my-colors :myProp="selectedShape.price"></my-colors>

</template>

<script>

import Colors from './Colors.vue';

export default {


    data() {

        return {
            selectedShape: {},
            shapes: [{
                id: 1,
                name: "Square",
                price: 4,

            }, {
                id: 2,
                name: "Circle",
                price: 6,

            }]
        }
    },

    computed: {

        totalShape: function() {
            var totalShape = 0;
            for (var i = 0; i < this.shapes.length; i++) {
                if (this.shapes[i].selected) {
                    totalShape += this.shapes[i].price;
                }
            }
            return totalShape;
        }
    },
    methods: {
        getSelectedShape() {
                return this.selectedShape;

            },
    }
}

</script>



      //child component

    <v-layout row v-for="color in colors" :key="color.id">
            <v-layout >
                <v-flex >
                    <v-checkbox class="text-xs-right" name="checkbox"  v-bind:label="`${color.name}`" v-model="color.checked" light></v-checkbox>
                </v-flex>
            </v-layout>
            <v-layout column>
                <v-flex >
                    <v-subheader>{{color.price}} €</v-subheader>
                </v-flex>
            </v-layout>
                    <v-subheader> {{sumTotal}} €</v-subheader>
    </v-layout>    
            <script>

            export default {

                props: ['myProp'],

                data: () => ({
                    colors: [{
                        id: 1,
                        name: "White",
                        price: 5,
                    }, {
                        id: 2,
                        name: "Green",
                        price: 4,
                    }, {
                        id: 3,
                        name: "Blue",
                        price: 3,
                    }, {
                        id: 4,
                        name: "Red",
                        price: 2,
                    }, {
                        id: 5,
                        name: "Purple",
                        price: 1,
                    }, {
                        id: 6,
                        name: "Yellow",
                        price: 0,
                    }],
                }),

                computed: {

                    total: function() {
                        var total = 0;
                        for (var i = 0; i < this.colors.length; i++) {
                            if (this.colors[i].checked) {
                                total += this.colors[i].price;
                            }

                        }
                        return total;
                    },

                    sumTotal: function() {
                      var myProp = 0;
                      return this.total + this.myProp;
                    }
                },
            }

            </script>

Answer 1

When your child component renders the first time, your parent component's data property selectedShape is equal to {}, so the selectedShape.price property, that was passed to the child, will be undefined and when you're invoking sumTotal method, it returns someNumber + undefined, which is NaN.

To fix this, you should set a default price value to the selectedShape property:

selectedShape: { price: 0}

Or you can change your sumTotal:

sumTotal: function() {
  return this.total + (this.myProp || 0);
}