在单击元素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)。