Vue步进器组件报错：_vm.stepProgression不是函数问题咨询

报错原因 #

Vue的计算属性本质是属性，不是方法，它无法直接接收参数。你在模板里把stepProgression当成函数传参调用，自然会触发“不是函数”的类型错误。

两种解决办法 #

办法1：改用方法（最直接）

把stepProgression从计算属性移到methods选项里，方法支持接收参数，调用方式不变：

模板代码：

<li
    v-for="(step, index) in stepper"
    :key="step.id"
    :class="stepProgression(index)"
>
    {{ step.stage }}
</li>

脚本代码：

methods: {
    stepProgression(index) {
        return {
            'is--selected': index === this.activeSlide,
            'is--visited': this.activeSlide > index
        }
    }
}

办法2：让计算属性返回函数（适合需要缓存场景）

如果后续逻辑需要依赖计算属性的缓存特性，可让计算属性返回一个能接收参数的函数：

脚本代码：

computed: {
    stepProgression() {
        // 返回一个接收index的函数
        return (index) => {
            return {
                'is--selected': index === this.activeSlide,
                'is--visited': this.activeSlide > index
            }
        }
    }
}

模板调用方式和你当前的写法一致即可。

内容的提问来源于stack exchange，提问作者Gazillacode