Vuex shows wrong reduce result

Question

I have two getters in my Vuex store

 getters: {
    itemCount: state => state.lines.reduce((total,line)=> total + line.quantity,0),
    totalPrice: state => state.lines.reduce((total,line) => total +
        (line.quantity*line.product.price),0)
},

They show results of reduce in the following component

<template>
<div class="float-right">
    <small>
        Your cart:
        <span v-if="itemCount > 0">
            {{ itemCount}} item(s) {{ totalPrice | currency}}
        </span>
        <span v-else>
            (empty)
        </span>
    </small>
        <b-button variant="dark"
                  to="/cart"
                  size="sm"
                  class="text-white"
                  v-bind:disabled="itemCount === 0">
            <i class="fa fa-shopping-cart"></i>
        </b-button>
</div>
</template>

<script>
    import {mapGetters} from "vuex";
    export default {
        name: "cart-summary",
        computed: {
            ...mapGetters({
                itemCount: "cart/itemCount",
                totalPrice: "cart/totalPrice"
            })
        }
    }
</script>

<style scoped>

</style>

The second one (totalPrice) - works as expected and return the total price in cart. The first one shows some weird result:

If my cart has 3 items of product A total will show 03 If my cart has 3 items of product A and 2 of B total will show 032

@LShapz that's most likely the right answer so you should add it. The qty is most likely a string. — Stephen Gilboy, Oct 03 '18 at 16:24

score 1 · Answer 1 · answered Oct 03 '18 at 16:26

Javascript, being a non-typed language, likes to coerce things, which makes math act funny sometimes. 1 + "1" === "11", for example.

It's likely that line.quantity is a string, so if you try parseInt(line.quantity), it'll return the actual value you seek.

Vuex shows wrong reduce result

1 Answers1