CODEWITHSUNDEEP
javascriptalpine.js
bhanu
bhanu

Reputation: 1860

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

I am trying to get the data-countdown value (date and time) from my component into x-data, so that I can create a countdown timer out of it.

I went through the documentation and couldn't find anything which could help me get the value. I use x-model to the value of input, but as this won't be changing, I just need the access to the value.

I tried it with x-bind with no luck.

This is a blade file. I am using this in roots-sage.

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

This is my JavaScript code.

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

Upvotes: 2

Views: 14462

Answers (2)

Niyaz
Niyaz

Reputation: 947

try, in Html

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

in Js

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

Upvotes: 0

Hugo
Hugo

Reputation: 3888

The way you would implement the whole thing with Alpine.js might be something like the following.

Note that you need quotes around {{ $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>

Alternatively, if you absolutely need to use the value in data-countdown attribute:

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

Note that it'll be difficult to do data-countdown="{ 'time': '{{ $class[time][day] }} {{ $class[time][time] }}' }" since you'll need to parse it as JSON (potentially).

Upvotes: 7

Related Questions