Capturing references with targets
Stimulus connects to form inputs via targets, or a special dataset. Internally, Stimulus creates a variable that can be used anywhere in the controller. For example, we define in the DOM an alias called name
:
<div data-controller="aliasController"> <input type="text" data-aliasController-target="name"> </div>
While in the controller, we define the following:
static targets = [ "name" ]
From here, I can call the target within any function/method in the following way:
this.nameTarget
As you can see, the alias is joined with the target text.
In the application we are developing, we have defined the target with the name myText
:
static targets = [ "myText" ]
We update the DOM of the input as follows:
<input type="text" data-transformer-target="myText" placeholder="Enter text">
The whole frontend is ready...