vue js计算方法答案

【问题标题】：vue js computed methodvue js计算方法
【发布时间】：2018-02-18 21:00:39
【问题描述】：

我对 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>

【问题讨论】：

你把什么作为“myProp”传下来了？
@Xlee 我已经更新了帖子。谢谢
this.total + selectedShape.price ~= this.total + undefined == NAN?
@Xlee 它也将 NaN 渲染为默认值...
默认值是什么意思？ selectedShape 是一个空的 {}。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

当您的子组件第一次渲染时，您的父组件的数据属性selectedShape 等于{}，因此传递给子组件的selectedShape.price 属性将为undefined，当您'再次调用sumTotal方法，返回someNumber + undefined，即NaN。

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

selectedShape: { price: 0}

或者你可以改变你的sumTotal:

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

【讨论】：