[Vue warn]: 渲染错误：\"TypeError: _vm.stepProgression is not a function\"答案

【问题标题】：[Vue warn]: Error in render: "TypeError: _vm.stepProgression is not a function"[Vue warn]: 渲染错误：\"TypeError: _vm.stepProgression is not a function\"
【发布时间】：2023-01-15 12:58:31
【问题描述】：

我正在创建一个带有 v-for 循环的步进器组件，它目前可以正常工作：

<li
    v-for="(step, index) in stepper"
    :key="step.id"
    class="goals-modal__step"
    :class="[{'is--selected': index === activeSlide }, {'is--visited': activeSlide > index}]"
>
    {{ step.stage }}
</li>

数据对象：

data: () => ({
    activeSlide: 0,
}

这按预期工作。

但是，当我尝试将参数（索引）从 v-for 循环传递到计算方法以便我可以返回动态类逻辑的类绑定时（这将变得更加复杂），我收到一个错误：“[Vue警告]：渲染错误：“TypeError：_vm.getClasses 不是函数”。

更新代码：

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

这是计算方法：

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

有人知道我们这里有什么问题吗？非常感谢任何帮助:)

【问题讨论】：

标签： vuejs2 v-for computed-properties dynamic-class-creation

【解决方案1】：

计算属性不能接收参数，所以你需要修复你的代码就是将你的属性（实际上是函数/方法）移动到 methods 部分，如下所示：

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

【讨论】：