I have a parent element with two inner elements:
<div data-controller="text">
<p id="child1" data-text-max-length-value="100" contenteditable=true>
Some text
</p>
<p id="child2" data-text-max-length-value="200" contenteditable=true>
Some text
</p>
</div>
Each child element sets a value. My understanding is the value should be assigned to its specific element. In my controller, however, the element is being identified as the outer div and the maxLength
value is reading the default value.
export default class extends Controller {
static values = {
originalFontSize: String,
maxLength: Number
}
limitLength() {
console.log(this.element, this.maxLengthValue)
}
}
As you can see, I can access the element through event.target
. Through that, I can find event.target.dataset.textMaxLengthValue
. Is there a way to do this with stimulus though, and not just vanilla js? Or is it not possible for the same value to be set on multiple child elements. And why is this.element
returning the parent instead of the child?