javascript - 获取点击元素 alpinejs 上的数据属性

Question

<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 中有一个元素，我想在单击该链接时获取数据属性的值。

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