javascript - vue js computed method -

i'm pretty new vue , js , i'm bit confused computed methods. follows create props share data parent component. works when sumtotal method executed default value displaying nan on {{sumtotal}}. know how can render int 0 default value sumtotal value.

     //parent component      <my-colors :myprop="selectedshape.price"></my-colors>  </template>  <script>  import colors './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;             (var = 0; < 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;                         (var = 0; < 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> 

when child component renders first time, parent component's data property selectedshape equal {}, selectedshape.price property, passed child, undefined , when you're invoking sumtotal method, returns somenumber + undefined, nan.

to fix this, should set default price value selectedshape property:

selectedshape: { price: 0} 

or can change sumtotal:

sumtotal: function() {   return this.total + (this.myprop || 0); }