5
<li class="">
    <a @click.prevent="download(e)" data-video="video_id" data-url="{{ base_url('tools/download_thumbnail') }}" data-quality="maxres"  class="rounded-b bg-white hover:bg-public-primary hover:text-white  py-2 px-4 block whitespace-no-wrap" href="#">Max Res</a>
</li>

I have an element in alpinejs I want to get values of the data attributes when I click on that link.

enter image description here

Muhammad Saim
  • 63
  • 1
  • 8

2 Answers2

5

You need to use one of the 6 "magic properties", in your case the $event one:

window.MyComponent = () => ({
  value: 0,
  download(e) {        
    this.value = e.currentTarget.dataset.url;
  },
});
body {
  font-family: monospace;
}

.button {
  display: inline-flex;
  border: 2px solid black;
  min-width: 64px;
  min-height: 72px;
  border-radius: 10px;
  font-family: monospace;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.button:hover {
  background: yellow;
}

.nestedSpan {
  display: inline-block;
  border: 1px dotted black;
  padding: 8px;
  border-radius: 8px;
}

.nestedSpan:hover {
  background: orange;
}

.nestedSpan > .nestedSpan {
  border-radius: 4px;
}

.nestedSpan > .nestedSpan:hover {
  background: red;
}
<div x-data="MyComponent()">
  <a
    @click.prevent="download($event)"
    data-video="video_id"
    data-url="{{ base_url('tools/download_thumbnail_A') }}"
    data-quality="maxres"
    class="button">
    A
  </a>
  
  <a
    @click.prevent="download($event)"
    data-video="video_id"
    data-url="{{ base_url('tools/download_thumbnail_B') }}"
    data-quality="maxres"
    class="button">
    <span class="nestedSpan">B</span>
  </a>
  
  <a
    @click.prevent="download($event)"
    data-video="video_id"
    data-url="{{ base_url('tools/download_thumbnail_C') }}"
    data-quality="maxres"
    class="button">
    <span class="nestedSpan">
      <span class="nestedSpan">C</span>
    </span>
  </a>
  
  <p x-text="value"></p>
</div>

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>

Note that in the event handler I'm still calling it e, but in the HTML I've used download($event) instead of download(e).

Also, note how I'm using e.currentTarget instead of e.target, as the former will reference the element the click event listener was added to, while the latter references the element that triggered the event (the actual element the user clicks, which might be a child of the element the even was added to), so e.target only works as expected if you have no children elements.

Danziger
  • 19,628
  • 4
  • 53
  • 83
  • This works in your case because you have no nested elements inside your anchor tag. With nested elements (i.e. a span), even with the event handler on the anchor tag, I have noticed the the click handler fires with the nested elements as the target. Any tips? – Brian FitzGerald Dec 06 '22 at 19:54
  • 1
    @BrianFitzGerald Use `e.currentTarget` instead of `e.target`. I've just updated the answer to address that. – Danziger Dec 06 '22 at 23:14
0

In my case $event didn't work but instead, I used $el

<input type="radio" value="0" x-init="$el.setAttribute('checked', '')" :name="student.id">
osama Abdullah
  • 193
  • 1
  • 12