How to fill current-step in lightning-progress-indicator?

Question

I have this code in html:

    <lightning-progress-indicator id="path" current-step={currentStep} type="path" variant="base">
        <template for:each={allStages.data} for:item="stage">
            <lightning-progress-step label={stage.Name} value={stage.Name} key={stage.Name} onclick={handleClick} ></lightning-progress-step>
        </template>
    </lightning-progress-indicator>
</template>

Code in js:

    import getAllStages from '@salesforce/apex/PathController.getAllStages';
    import STAGE_NAME from '@salesforce/schema/Stage__c.Name';

    export default class CustomPath extends LightningElement {
        
    @api recordId;
    @track currentStep
    @wire(getAllStages, { matterId: '$recordId', fields: [STAGE_NAME] })
    allStages;
    
    handleClick(event){
        this.currentStep = event.target.index;
        window.console.debug(this.currentStep);
    }

So, how can I fill current-step={currentStep} from js?

Answer 1

As stated in the documentation current-step (emphasis mine)

Set current-step to match the value attribute of one of progress-step components. If current-step is not provided, the value of the first progress-step component is used.

So the handleClick method should be

handleClick(event){
    this.currentStep = event.target.value;
    console.debug(this.currentStep);
}

By the way, after Spring '20 there is no need for the @track decorator in such cases.
All fields in a Lightning web component class are reactive. If a field’s value changes, and the field is used in a template or in a getter of a property that’s used in a template, the component rerenders and displays the new value. More info here.