EmberJS Select onChange event not passing selected value

Question

I'm trying to get the selected value from a select tag, I have tried these cases but I'm not able to get the selected value, Does anyone have an idea on what is wrong with the way I'm declaring the action on the select tag?

UPDATE 1

I tried to recreate the problem on ember-twiddle but for some reason it won't run as it does on my project, it seems that ember-twiddle does not read the actions declared on the route. However here is the example:

Example on ember-twiddle

Case 1

In this case I got an error:

Uncaught TypeError: Cannot read property 'apply' of undefined

Template:

 {{#each model.items as |item|}}
   <select class="form-control" onchange={{action 'ChangeCombo' item "Price" value='target.value'}}>
     <option value="">Select an option</option>
     <option value="1000">$1000</option>
     <option value="100">$100</option>
     <option value="10">$10</option> 
   </select>
{{/each}}

Route Actions:

actions: {

   ChangeCombo(paramOne, paramTwo, paramThree) {

     console.info(paramOne, paramTwo, paramThree);

   },

}

Case 2

In this case the first parameter is the current Item from de model array, the second one is the string "Price" but the third parameter is undefined and the last parameter which is supposed to be the event object is also undefined.

Console output:

{object}, "Price", undefined, undefined

Template:

{{#each model.items as |item|}}
   <select class="form-control" {{action 'ChangeCombo' item "Price" value='target.value' on='change'}}>
       <option value="">Select an option</option>
       <option value="1000">$1000</option>
       <option value="100">$100</option>
       <option value="10">$10</option> 
   </select>
{{/each}}

Route Actions:

actions: {

   ChangeCombo(paramOne, paramTwo, paramThree, paramFour) {

     console.info(paramOne, paramTwo, paramThree, paramFour);

   },

}

Ember version

ember-cli: 3.7.1 node: 10.1.0 os: win32 x64

just an idea, maybe one of your variables is a reserved keyword? — Icewine
Not really, the real name of my parameters are written in Spanish. But I'm going to edit my question code so it is not assumed that are reserved keywords. Thanks for the idea. — DeividKamui
How about conforming the single quotes to double quotes on everything so you can rule out any quote errors — Icewine
@DeividKamui it would be helpful if you edited your post with an ember-twiddle demonstrating the problem — mistahenry

Igor Igor · Accepted Answer · 2019-02-02T10:49:57

If you wan't to use the action value option, you can't have any other params directly in the action helper. You need to use closure actions, i.e.

<select class="form-control" onchange={{action (action 'ChangeCombo' item "Price") value='target.value'}}>
   <option value="">Select an option</option>
   <option value="1000">$1000</option>
   <option value="100">$100</option>
   <option value="10">$10</option> 
</select>

EmberJS Select onChange event not passing selected value

1 Answers