javascriptember.jsember-components

How to pass input data from template to the component class in ember?


I am trying to pass the data which is in the input field to the component class

This is my component-class alpha.js

@tracked choice;

    @action next() {

        console.log(this.choice);
    }

This is my template alpha.hbs

    <Input @value={{this.choice}} type="radio"  />
    <button onclick={{action 'next'}}>Next</button>

So far it is returning empty.

Any help would be appreciated. Thanks


Solution

  • The <Input component is designed to text inputs. For radio buttons you need to do some manual work. A simple approach could look like this:

    <input value="one" type="radio" {{on "change" this.change}} />
    <input value="two" type="radio" {{on "change" this.change}} />
    <button onclick={{action 'next'}}>Next</button>
    

    With this change action:

    @action change(event) {
      this.choice = event.target.value;
    }