controller target access problem

hey,

is it possible to have multiple data-content-loader-url on one controller for different elements amd also data-targets. like that

<div data-controller="myController" data-content-loader-url="/api/test">
   <select data-controller="myController" data-content-loader-url="/api/loader-1" data-target.loader1 >
   </select>
   <select data-controller="myController" data-content-loader-url="/api/loader-2" data-target="myController.loader2">
   </select>
   <select data-controller="myController" data-content-loader-url="/api/loader-3" data-target="myController.loader3">
   </select>
</div>

i have created the static methog like that:

static get targets() {
			return ["loader1","loader2","loader3"]
		}

when i try to access the the input variables like this.:

let loader 3 = this.loader3Target.value

i get the following error

Error invoking action "click->myController#saveLoader"

 
Error: Missing target element "myController.loader3"
Stack trace:
get@http://localhost:3000/js/stimulus.umd.js:5:1548
saveProjectDetails@http://localhost:3000/js/main.js:326:8
E</t.prototype.invokeWithEvent@http://localhost:3000/js/stimulus.umd.js:5:3143
E</t.prototype.handleEvent@http://localhost:3000/js/stimulus.umd.js:5:2684
 

It worked if i had different contrller for the targets and the content url loader

[javan]

Every controller+identifier pairing creates a new scope, which allows nested controller elements to function independently. Nested controller elements are isolated from parent elements with the same identifier. For example:

<div id="a" data-controller="content">
  <div id="b" data-controller="content" data-target="content.view">
    <div data-target="content.view"></div>
  </div>
</div>

The controller for b will have 2 viewTargets and a will have 0 (because they both belong to b’s scope).

[rupasix]

My point was that propably you demand all variables (loader1, loader2 and loader3) on your action saveLoader but you have 3 instances of your controller “myController”, each one with different loader. So if i’m right you have something like that: <select data-controller="myController" data-content-loader-url="/api/loader-1" data-target="myController.loader1" > </select> and in your saveLoader: let loader3 = this.loader3Target.value which should end with error Missing target element "myController.loader3" because you have only loader1.

Is that your case? If not - i don’t understand what you want to achieve and can’t help you. Can you share with us your “MyController” code and full HTML where that controller is used?