javascript - 如何在 Alpine.js 组件中获取数据属性的值？

Question

我试图从我的组件中获取 data-countdown 值(日期和时间)到 x-data 中，这样我就可以创建一个倒数计时器

我浏览了文档，但找不到任何可以帮助我获得值(value)的东西。我对输入值使用 x-model，但由于这不会改变，我只需要访问该值。

我用 x-bind 尝试过，但没有成功。

这是一个 Blade 文件。我在 roots-sage 中使用它。

<div class='countdown' x-bind:data-countdown="{ 'time': {{ $class[time][day] }} {{ $class[time][time] }} }">
</div>

这是我的 JavaScript 代码。

window.singleGroupClass = function () {
  return {
    data: 'hey',
    time: console.log(this.el),
    countdown() {
      console.log(this);
    },
  }
}

Answer 1

您使用 Alpine.js 实现整个过程的方式可能类似于以下内容。

请注意，您需要在 {{ $class[time][day] }} {{ $class[time][time] }} 周围加引号)。

<div class='countdown' x-data="singleGroupClass({ 'time': '{{ $class[time][day] }} {{ $class[time][time] }}' })">
</div>
<script>
  window.singleGroupClass = function (seedData) {
    return {
      time: seedData.time,
      countdown() {
        console.log(this);
      },
    }
  }
</script>

或者，如果您绝对需要使用 data-countdown 属性中的值:

<div class='countdown' x-data="{ time : $el.dataset.countdown }" data-countdown="{{ $class[time][day] }} {{ $class[time][time] }}">
  <div x-text="time"></div>
</div>

请注意，这样做会很困难 data-countdown="{ 'time': '{{ $class[time][day] }} {{ $class[time][time] }} ' }" 因为您需要将其解析为 JSON(可能)。