vue js計算方法

Question

私はVueとJsでかなり新しいです。私は計算された方法と少し混乱しています。したがって、次のように親コンポーネントのデータを共有する小道具を作成します。すべてが機能しますが、sumTotalメソッドがデフォルト値として実行されると、{{sumTotal}}にNanと表示されます。私はsumTotal値の既定値としてint 0をどのようにレンダリングできるかを知りたいと思います。

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

あなたの子コンポーネントが最初にレンダリングするとき、あなたの親コンポーネントのデータプロパティselectedShapeが{}に等しいので、selectedShape.price財産あなたはsumTotalメソッドを呼び出しているとき、それが子供に渡された、undefinedこととなります、つまりNaNを返します。

selectedShape: { price: 0} 

をそれとも、変更することができ、あなたのsumTotal：この問題を解決するには

、あなたはselectedShapeプロパティにデフォルトprice値を設定する必要があり

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