Question

我的vue组件（第二个组件）是这样的：

<template>
    <div class="row">
        <div v-for="item in options">
            <div class="panel panel-default panel-product">
                ....
            </div>
        </div>
        <div>
            <a href="#" class="panel-more">
                <span>{{priceMin}} test {{priceMax}}</span>
            </a>
        </div>
    </div>
</template>

<script>
    ...
    export default {
        ...
        computed: {
            ...mapGetters([
                'getListByPrice', 'getPriceMin', 'getPriceMax'
            ]),
            options() {
                return this['getListByPrice']
            },
            priceMin() {
                return this['getPriceMin']
            },
            priceMax() {
                return this['getPriceMax']
            },
        },
        ...
    }
</script>

如果执行了代码，则显示的数据不匹配

如果我是console.log（this ['getListByPrice']），则有5个数据。但是在超过5个数据的循环中显示

如果我删除了代码：

<span>{{priceMin}} test {{priceMax}}</span>

结果是正确的

为什么我通过计算调用priceMin和priceMax，显示的结果不匹配？

Answer 1

我认为你不需要：

        options() {
            return this['getListByPrice']
        },
        priceMin() {
            return this['getPriceMin']
        },
        priceMax() {
            return this['getPriceMax']
        },

直接在你的胡须标签中使用... mapGetters中的项目。另外，使用vue的chrome插件检查你的vuex商店。

您发布了vuex商店，因此此评论解决了这个问题。你的商店不正确。价格应该在你的商店，而不是priceMax和priceMin。那些是国家的突变。请仔细阅读vuex文档。

如何在vue.js 2中运行一些计算机？

1 个答案: