Search code examples
javascriptstimulusjs

How can I declare a const string in my Stimulus JS controller?


I'm wanting to set a const variable for a CSS selector for my controller, instead of having it hard coded throughout my controller. I had put the declaration in the initialize() of my controller, but I'm getting an error that the variable wasn't declared. What's the correct way of doing this?

Current Attempt

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["form"]

  initialize() {
    const seasonInputSelector = "input[id$='_season']"
  }

  change(event) {
    // ...
    var yearNodes = this.formTarget.querySelectorAll(seasonInputSelector)
    // ...
  }

}

Error: ReferenceError: seasonInputSelector is not defined


Solution

  • Use a const variable in the module's root scope:

    import { Controller } from "stimulus"
    
    const seasonInputSelector = "input[id$='_season']";
    
    export default class extends Controller {
      static targets = ["form"]
    
      initialize() {
      }
    
      change(event) {
        // ...
        var yearNodes = this.formTarget.querySelectorAll( seasonInputSelector );
        // ...
      }
    
    }