<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.

<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.

• javascript
• alpine.js

3 Answers 3

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/gh/alpinejs/[email protected]/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.

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">

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

$el.dataset.url

<script src="//unpkg./alpinejs" defer></script>

<div x-data="app">
  <span>Click the button</span>
  <div>
    <button @click.prevent="console.info($el.dataset); console.info('URL: ' + $el.dataset.url);" 
    data-video="video_id" 
    data-url="tools/download_thumbnail" 
    data-quality="maxres">
      Max Res
    </button>
  </div>
</div>
<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('app', () => ({}))
  })
</script>