javascript - 无法返回对象数组属性的总和

Question

我正在尝试从数组返回对象属性的总和。我设法在另一个组件中完成此操作，但无法在另一个组件中重做。

我收到以下错误:this.cartitems.forEach 不是函数”

下面是一个工作示例:

<template>
<div id="shopcartpreview"  v-if="carthover">
    <div class="cartitem" v-for="item in cartitems">
        <div class="cartitempic"><img class="productImg" width="80px" 
   height="80px" v-bind:src="'assets/products/' + item.image"></div>
        <div class="cartitemdetails">
            <div class="cartitemname">{{item.name}}</div>
            <div class="cartitemqty">{{item.qty}} X </div>
            <div class="cartitemprice">€{{item.unit_price}}</div>
        </div>
        <div class="cartitemdelete">
            <img src="assets/images/icon-bin.png" width="15px" 
    height="15px">
        </div>
    </div>

    <div class="carttotal">
        <div class="carttotaltext">TOTAL:</div>
        <div class="carttotalprice">€{{Total}}</div>
    </div>
    <div class="cartcheckouttbn">PROCEED TO CHECKOUT</div>
    <div class="viewcart">VIEW CART</div>



</div>    
 </template>
 <script>
  module.exports = {
    data: function () {
            return{ 
                cartitems: 0,
                carthover: false
            }
    },
    created(){ 
        EventBus.$on('addToCart', (payload) =>{
            this.cartitems = payload
        }),
        EventBus.$on('mouseover', (carthover) =>{
            this.carthover = carthover
            $('#shopcartpreview').css('display','block');
        })
    },
    computed: {
        Total: function() {
            var total = 0;
            this.cartitems.forEach(item => {
                total += (item.unit_price * item.qty);
            });
            return total;
        }
    }
}

下面是我无法正常工作的代码:

  <template>
<div>
    <div id="headerLogo">{{carthover}}<span v-if="carthover"> | {{cartitems[0].name}}</span></div>
    <div id="headerAction">
        <div class="headerActionItem">LOGIN/REGISTER</div>
        <div class="headerActionItem"><img src="assets/images/icon-search.png" width="20px" height="20px"></div>
        <div class="headerActionItem"><img src="assets/images/icon-settings.png" width="20px" height="20px"></div>
        <div class="headerActionItem"><img src="assets/images/icon-love.png" width="20px" height="20px"><a class="floating ui red circular label">0</a></div>
        <div class="headerActionItem" @mouseover="mouseOver"><img src="assets/images/icon-cart.png" width="26px" height="20px"><a class="floating ui red circular label elProduct" id="cartLabel">{{Totall}}</a></div>
    </div>
    <shopcart-preview></shopcart-preview>
</div> 
   </template>

   <script>
module.exports = {
    data: function () {
        return{ 
            cartitems: 0,
            carthover: false
        }
    },
    components: {
        'shopcart-preview': httpVueLoader('components/shopcart-preview.vue')
    },
    created(){ 
        EventBus.$on('addToCart', (payload) =>{
            this.cartitems = payload                
        })
    },
    methods: {
        mouseOver(){ 
            this.carthover = true 
            carthover = true
            EventBus.$emit('mouseover',carthover);
        }
    },
    computed: {
        Totall: function() {
            var totall = 0;
            this.cartitems.forEach(item => {
                totall += (item.unit_price * item.qty);
            });
            return totall;
        }
    }
}

不起作用的部分如下:

computed: {
        Totall: function() {
            var totall = 0;
            this.cartitems.forEach(item => {
                totall += (item.unit_price * item.qty);
            });
            return totall;
        }
    }

有很多代码，但那是为了全面了解代码中发生的情况。也许问题是代码另一部分的结果。

Answer 1

this.cartitems 不是数组，因此没有 Array.forEach() 方法。这可能是因为您在此处将 cartItems 的初始状态设置为 0

data: function () {
        return{ 
            cartitems: 0,
            carthover: false
        }
    },

请记住，即使稍后在为 this.cartItems 分配 payload 时将其修改为数组，如果您的 forEach调用在突变完成之前运行，您的脚本将崩溃。