[Vue warn]: Error in render: "TypeError: _vm.stepProgression is not a function"

Question

I'm creating a stepper component with a v-for loop, which currently works without an issues:

<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 object:

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

This is working as expected.

However, when I try to pass the argument(index) from the v-for loop to a computed method so that I can return the class bindings for dynamic class logic (this will become more complex), I get an error: "[Vue warn]: Error in render: "TypeError: _vm.getClasses is not a function".

Updated code:

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

And this is the computed method:

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

Does someone know what the issue us here? Any help much appreciated :)

Answer 1

Computed properties cannot receive arguments, so all you need to fix you code is move your property(function/method actually) to methods section like so:

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