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

Question

我试图将data-countdown组件中的值（日期和时间）获取到 中x-data，以便我可以从中创建一个倒计时器。

我浏览了文档，但找不到任何可以帮助我获得价值的内容。我习惯x-model输入的值，但由于这不会改变，所以我只需要访问该值。

我尝试了一下，x-bind但没有运气。

这是一个刀片文件。我在 root-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（可能）。