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

【问题标题】：How can I run some computed in vue.js 2?如何在 vue.js 2 中运行一些计算？
【发布时间】：2018-03-24 14:52:10
【问题描述】：

我的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，显示的结果不匹配？

【问题讨论】：

你什么时候使用console.log？
为什么要包装 Vuex getter？您可以使用getListByPrice 等代替options。如果您真的需要，您甚至可以将getter 重新映射到另一个名称，例如mapGetters({ options: 'getListByPrice', ... })

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

我认为你不需要：

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

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

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

【讨论】：