vue js berechnete Methode

Question

Ich bin ziemlich neu mit Vue und Js und ich bin ein bisschen verwirrt mit berechneten Methoden. So wie ich erstellen Sie eine Requisiten, um Daten von der übergeordneten Komponente zu teilen. Alles funktioniert, aber wenn die Methode sumTotal als Standardwert ausgeführt wird, wird Nan auf {{sumTotal}} angezeigt. Ich würde gerne wissen, wie ich eine int 0 als Standardwert für SumTotal Wert rendern kann.

 //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

Wenn Ihr Kind Komponente das erste Mal macht, Ihre Daten Eigenschaft der übergeordneten Komponente selectedShape gleich {}, so dass die selectedShape.price Eigenschaft wurde, dass das Kind übertragen wird undefined sein und wenn Sie den Aufruf sumTotal Methode gibt es someNumber + undefined zurück, das ist NaN.

Um dies zu beheben, sollten Sie einen Standard price Wert auf die selectedShape Eigenschaft:

selectedShape: { price: 0} 

Oder können Sie Ihre sumTotal ändern:

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