如何在 Alpine.js 组件中获取 data-attribute 的值？

Question

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

我浏览了文档，但找不到任何可以帮助我获得价值的东西。我对输入值使用 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（可能）。

Answer 2

尝试，在Html

<div x-data="alpineComponent()" id="reviews" data-reviews='<?= $dataObj ?>'></div>

在 Js

{
  return {
    reviews: JSON.parse(document.getElementById('reviews').dataset.reviews)
  }
}

如何在 Alpine.js 组件中获取 data-attribute 的值？

How can I get the value of a data-attribute in an Alpine.js component?

javascript

alpine.js