admin 管理员组

文章数量: 1086019

 
<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
Share Improve this question asked May 2, 2021 at 7:04 Muhammad SaimMuhammad Saim 733 silver badges8 bronze badges 0
Add a ment  | 

3 Answers 3

Reset to default 4

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>

本文标签： javascriptGet data attributes on click element alpinejsStack Overflow

版权声明：本文标题：javascript - Get data attributes on click element alpinejs - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744017027a2519106.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。