0
import { LightningElement, api, track } from 'lwc';

var trackerArray = [
    { status: "Starting Point", active: 'inactive'},
    { status: "Global Filter Selection", active:  'inactive'},
    { status: "Scenario Filter Selection", active: 'inactive'},
    { status: "Prospect Validation", active: 'inactive' },
  ];
  

export default class PizzaTracker extends LightningElement {

    @api status;
    @track input;
    @track arr=[];

    


    connectedCallback(){

  
        this.input=this.status;

        console.log('Inp'+ this.input);


// Iterate over the trackerArray
for (var i = 0; i < trackerArray.length; i++) {
  // Check if input matches the status property
  if (trackerArray[i].status === this.input) {
    // Update the active property to true
    trackerArray[i].active = 'active';
    break; // Exit the loop if a match is found
  }
}

// Display the updated trackerArray
this.arr=trackerArray;
console.log('Tracker'+JSON.stringify(this.arr[0]));
    }
    renderedCallback() {
        // Apply inline styles to active steps
        const steps = this.template.querySelectorAll('.step');
        steps.forEach((step, index) => {
          if (this.arr[index].active === 'active') {
            step.style.color =  'rgb(255, 255, 255)';//'blue'; // Apply blue color to active steps
            step.style.backgroundColor = 'rgb(100, 0, 255)';

          }
        });
      }
}

I've attached my code and problem for some reason am getting this error The Lightning Component c:cHVAC_PizzaTracker generated invalid output for field status..I've tried different possibilities still am getting the error...the '@api status' I'll get from js-meta.xml file

satheesh
  • 3
  • 2

0 Answers0