How can I access a property of a step component from the parent page of a Vue stepper?

Question

Not very experienced with Vue, and am struggling to fix an issue with an existing component made by a previous developer.

On the parent page, the stepper component is declared like this, with these as the names of the sub-components that make up the individual steps:

@Component({
    name: 'switch-stepper',
    components: {
        Stepper,
        StepIndicator,
        FirstStep,
        SecondStep,
        ThirdStep
    }
})

There's a property in ThirdStep that needs to be changed, either in the parent page or in FirstStep. The property in question is public, and declared like this:

@Prop({ default: true })
public myBooleanProperty: boolean;

However, inside the parent page, if I try this:

ThirdStep.myBooleanProperty

It is not recognised by the intellisense and is undefined. I've tried also creating a public method on ThirdStep that I can call to use ForceUpdate but public methods likewise seem to be inaccessible.

I've also tried setting the public property via a function in the parent page when the step is created:

<third-step :page="page"
            :step="steps[4]"
            :myBooleanProperty="setMyBooleanProperty()"
            v-show="currentStep === steps[4]">
</third-step>

But as far as I can tell this is only called once when the step is created and never accessed again.

What can I do to set the property of this child step via other components in the stepper?

Answer 1

There's a property in ThirdStep that needs to be changed, either in the parent page or in FirstStep. The property in question is public, and declared like this:

If a property needs to be changed, it should be changed in the component which returns the property in the data property. By this, I mean, the component that has

data() {
  return {
    myBooleanProperty: false // or true. This is the local data that will be initialised and passed as props to the ThirdStep component
  }
} 

If this is in the parent page, change ThirdStep.myBooleanProperty to this.myBooleanProperty = *enter value*. The change of the value of myBooleanProperty can be done in a method, watcher, computed property etc. The reason ThirdStep.myBooleanProperty is not working in the parent component, is that each vue component is a Vue instance and ThirdStep cannot have access to an instance property in the parent component.

ParentComponent.vue

@Component({
    name: 'switch-stepper',
    components: {
        Stepper,
        StepIndicator,
        FirstStep,
        SecondStep,
        ThirdStep
    }
})

<third-step>
  ...
  :myBooleanProperty="myBooleanProperty" // my boolean property is passed as props from the parent component, I assume
  ....>
</third-step>

When myBooleanProperty is changed where it is initialised (parent component, I assume), this will cause the value of the myBooleanProperty props, passed into the ThirdStep component, to change and there will be a re-render of the parts of the ThirdStep component that use myBooleanProperty props.