获取点击元素 alpinejs 上的数据属性答案

【问题标题】：Get data attributes on click element alpinejs获取点击元素 alpinejs 上的数据属性
【发布时间】：2021-07-24 23:20:49
【问题描述】：

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

我在 alpinejs 中有一个元素，我想在单击该链接时获取数据属性的值。

【问题讨论】：

标签： javascript alpine.js

【解决方案1】：

您需要使用 6 个“魔法属性”之一，在您的情况下是 $event 之一：

window.MyComponent = () => ({
  value: 0,
  download(e) {        
    this.value = e.target.dataset.url;
  },
});

body {
  font-family: monospace;
}

.button {
  display: inline-block;
  border: 2px solid black;
  font-family: monospace;
  padding: 16px;
}

<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">
    B
  </a>
  
  <a
    @click.prevent="download($event)"
    data-video="video_id"
    data-url="{{ base_url('tools/download_thumbnail_C') }}"
    data-quality="maxres"
    class="button">
    C
  </a>
  
  <p x-text="value"></p>
</div>

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

请注意，在事件处理程序中我仍将其称为 e，但在 HTML 中我使用了 download($event) 而不是 download(e)。

【讨论】：