Ember无法将参数传递给动作

Question

It constantly gives me value undefined no matter what value I put in value or if I change it to onclick="{{action ...}}". I've literally tried every combination I could think of. I've even used a tags to see if that will save the value. I'm not sure at all how I'm supposed to go about getting this image url.

This is in ember and I have used the {{action "function name"}} combination in other parts of my code but this is the ONLY part that will not work.

Template file

<div class="gif-display">
              {{#each giffy as |gif index|}}
                  <img width="150px" {{action "selectGIF" value=gif}} src={{gif.images.original.url}}>
              {{/each}}
</div>

Controller class

selectGIF: function (num) {
  console.log("num", num)
  let newPost = this.store.createRecord('post', {
    email: this.get("session.currentUser.email"),
    body: `${gifs[num].images.original.url}`,
    timestamp: new Date().getTime(),
    image: true
  });
  gifs = ''
  newPost.save()
}

And YES I have tested to see if it even runs the function and it does and the images do show up so that's not the problem either.

My question is, is it possible to pass a parameter into this function. If not is there a work around? Should I use a helper function?

Thank you!

Answer 1

A function arguments list is an indexed list, rather than a key-value collection. Because of that it is wrong to pass arguments as key-value pairs. Instead, arguments should be given to the helper directly after the action name, as a space-separated list of either references or literal values:

<img {{action "selectGIF" gif}} />

Source: https://guides.emberjs.com/v3.0.0/templates/actions/#toc_action-parameters

---

This page also shows that key-value pairs can be given to the action helper, however these are parameters for the helper's execution, instead of the actual action's execution.