How can I pass a dynamic value to an action?

[Tmeister]

Hi all,

I'm using data-wp-each to create some elements. On these elements, I have a button that triggers an action; what I'm trying to do, and I can't find the way, is pass or access a parameter (dynamic) to the action to identify, let's say, the element ID.

Basically, I want to get the value of context.request.ID in the action.

Could someone point me in the right direction?

This is what I get so far.

<section class="fp-board-holder" data-wp-interactive="unique-name" data-wp-init="callbacks.loadEntities">
    <h2 class="fp-board-holder__title">Board Name</h2>
    <template data-wp-each--request="state.requests">
        <article class="fp-request-card" >
            <div class="fp-request-card__vote-panel">
                <button
                        <!-- data-wp-on--click="actions.voteUp(context.request.ID)"  <- I try this too -->
                        data-wp-on--click="actions.voteUp"
                        data-request-id="context.request.ID"
                        class="fp-request-card__vote-button fp-request-card__vote-button--up"
                        aria-label="Vote up">
                    <span class="fp-visually-hidden">Vote up</span>
                    <span aria-hidden="true">▲</span>
                </button>
                <!-- ... More content -->
        </article>
    </template>
</section>

const { state } = store('unique-name', {
  state: {
    requests: [],
    isLoadingEntities: false
  },
  callbacks: {
    loadEntities: () => {
      const boardApiURL = `pathTo/wp-json/feature-press/v1/public/board/${id}`
      fetch(boardApiURL)
        .then((response) => response.json())
        .then((data) => {
          state.requests = data
          state.isLoadingEntities = false
        })
        // more validations and stuff
    }
  },
  actions: {
    voteUp: () => {
      console.log(`Vote up!`)
    },
  }
})

I appreciate any help you can provide.

[Tmeister]

I answer myself.

After reading the docs in-depth, I learned there is no need to pass anything; we can use the getContext helper.

That function returns all the block's context, in my example, the data-wp-each--request, and from there, I get access to all the data.

Thanks anyway!

[sirreal]

That's correct, in this case you'd use getContext function in the implementation of voteUp.