How to manage data-attributes?

1

In some of my HTML elements, I use data-controller--name-parameter--name-param attribute and then get it in the stimulus controller by event.params.parameterName. In other places, I use simple data-whatever-name-I-want and then access it using element.getAttribute() method. In other places I use this.data.get('url') and event.item.dataset.id;.

What am I doing wrong and how can I manage these different attributes and methods? I don’t know why I am using one over the other.

2

What is the recommended way of doing these things? Also what state should I put in the HTML and how do I manage it?

3

I have the same issue… btw you can also use

this.element
1 Like
4

What this.element does? Using it to get attributes? Like this.element.getAttribute(). I get it. But how do you manage all these different attributes? Is there any convention to follow?

5

I’ve seen this difference and chosen to adopt the data-controller-url and this.data.get('url') pattern. Seems most consistent with the other naming conventions of stimulus controller things (targets, names, outlets, etc)

1 Like