Question

我对Vue和Js很新，我对计算方法有点困惑。如下所示，我创建了一个 props 来共享来自父组件的数据。一切正常，但当sumTotal方法作为默认值执行时，它会在{{sumTotal}}上显示 Nan 。我想知道如何将int 0渲染为sumTotal值的默认值。

     //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属性，将undefined，当您调用sumTotal方法时，它会返回someNumber + undefined，即NaN。

要解决此问题，您应该为price属性设置默认selectedShape值：

selectedShape: { price: 0}

或者您可以更改sumTotal：

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

vue js计算方法

1 个答案: