Passing select value to object in an Ember component

[CoreyFedde]

I am trying to create an ember component that is a select input. I have an action on the select that will pass the value of the option selected to a new object being created in the js file for the component.

The end result would hopefully be an object that I can pass up from the component and used in the eq helper add-on to compare against other object or values.

Problem: The object I am creating and the parameter I am passing my component action are coming up as undefined. I've tried changing how I grab the object and changing the object, but I'm hitting a wall.

The way I am doing it right now is similar to how we created a new object for the create-list form. The value of the input was tied to a new object that was then passed up.

With the select, I have the value of the select tied to the target.value of the option selected and that is passed onto the new object.

Code: JS

selectedLoan: {
    value: null,
  },
  actions: {
    selectLoan(loan) {
      this.set('selectedLoan.value', loan)
      console.log('did anything')
      console.log('loan param', loan)
      console.log('object', this.get('selectedLoan.value'))
    },
  },

Template

<select class="form-control" {{action "selectLoan" value="target.value" on="change"}}>
  <option value="new-loan">New Loan</option>
  {{#each loans as |loan|}}
  <option value="{{loan.name}}">{{loan.name}}</option>>
  {{/each}}
</select>

[payne-chris-r]

I think Brad just had a similar issue. I'm not sure how he ended up resolving it--it's not something I've done yet. Ask him if he has a minute to show you. If he doesn't I'm happy to help out!

[scottyscripts]

Take a look at this issue from yesterday https://github.com/ga-wdi-boston/capstone-project/issues/835

[CoreyFedde]

Should have added, I took a look at the code Scott posted from that issue and was not able to get it working. The onchange={{action... didn't get picked up by the action at all and I value wasn't changing.

[CoreyFedde]

I take that back, Scott's method works perfectly.

I was wrapping the brackets in double quotes because they change color in the atom browser. It works perfectly without.

Keeping the action and value as an HTML onchange event seems to be the only way it works.

Here is a step-by-step of why that method works and a similar, but more complicated one posted as a gist: https://balinterdi.com/blog/how-to-do-a-select-dropdown-in-ember-20/