Question

我最近开始使用vuejs，其想法是用它制作一个POS系统。所以目前我有一系列产品并展示它们等一切都很好。现在我的问题是在尝试计算所有产品的总分价格（没有增加增值税的价格）时。

所以这就是我现在所拥有的：

<div class="col-md-12 productsList">
            <div class="product" v-for="product in products">
                <p>
                    <span class="col-md-4">@{{ product.name }}</span>
                    <span class="col-md-3 col-md-offset-1">@{{ product.amount }}</span>
                    <span class="col-md-3 col-md-offset-1" v-text="(parseFloat(product.price) * product.amount) | float"></span>
                </p>
            </div>
        </div>

<script>

new Vue({
    el: '.container-custom',

    data: {
        products: []
    },

    ready: function() {
        var self = this;
    },

    methods: {

        fetchSingleProduct: function(productId) {

            this.$http.get('get/products/'+productId).then((product) => {

                var existingProducts = this.products.filter(function (item) { return (item.id == product.data.id)});

                if (existingProducts.length) {
                    existingProducts[0].amount += 1;
                } else {
                    product.data.amount = 1;
                    this.products.push(product.data);
                }
            });

        },

    },

    filters: {
        float: function (value) {
            return value.toFixed(2);
        }
    }
});

每个产品都有：名称，金额，价格，增值税

每个产品的增值税也可能不同（有些产品有6％，有些产品有21％）等。我怎么用vue完成这样的事情呢？

Answer 1

只需将您需要的所有产品添加到数组中，然后创建一个计算属性，该属性返回该数组的总和array.reduce或简单for loop ...

VUE通过数组过滤

1 个答案: