Question

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

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

我用x-bind试过了，没有运气。

这是刀片文件。我在roots-sage中使用它。

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

这是我的JS。

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

Answer 1

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

请注意，您需要在{{ $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 中

.a-IG-controlsIcon, .a-IRR-button.a-IRR-sortWidget-button, .a-IRR-controlsIcon {
    --a-icon-size: 40px!important;
}

在 Js 中

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

如何在AlpineJs组件中获取数据属性的值？

2 个答案: