CODEWITHSUNDEEP
selectember.js
base34
base34

Reputation: 395

Can't get current value from select in Ember 2

I'm trying to get the value every time the user changes the select component. But the value always returns 'undefined'.

I've been through all Stackoverflow questions and other sites, but without success. I feel like I'm missing something here. I'm using Ember 2.8.

My component template:

<div class="form-group">
    <label for="{{selectId}}">{{selectTitle}}</label>
    <select name="{{selectId}}" id="{{selectId}}" class="form-control" {{action "getSelectValue" on="change" value="target.value"}}>
        <option value="0" selected>{{selectDefault}}</option>
        {{#each model as |choice|}}
            <option value={{choice.id}}>{{choice.name}}</option>
        {{/each}}
    </select>
</div>

My component logic:

import Ember from 'ember';

export default Ember.Component.extend({
    tagName: '',
    currentValue: null,
    actions: {
        getSelectValue(value) {
            console.log(value); //always returns undefined
        }
    }
});

I'm calling it like this:

{{select-control model=model.tasks selectTitle="Task" selectDefault="Choose Task" selectId="taskSelect"}}

In the template I've also used the onchange="{{action...}}" syntax, but then the action wasn't called.

At this point I have no logic in my route or controller handling this.

Thanks for your help!

Upvotes: 0

Views: 515

Answers (1)

Ember Freak
Ember Freak

Reputation: 12872

<select name="{{selectId}}" id="{{selectId}}" class="form-control" {{action "getSelectValue" on="change" value="target.value"}}>

change the above line to 

<select name="{{selectId}}" id="{{selectId}}" class="form-control" onchange={{action "getSelectValue" value="target.value"}}>

Upvotes: 1

Related Questions