Aurelia radio button binding

Question

Hope someone can help me with this. I've got the following view:

<label repeat.for="option of options">
    <input type="radio" name="periodOptions" model.bind="option" checked.bind="$parent.selectedOption" click.delegate="clicked()"/>
    ${option.text}
</label>

and the following viewmodel:

export class PeriodPanel {
    heading = 'Tidsperiode';
    options = [];
    selectedOption = {};

    constructor() {
        this.options = [
            {id:1, text:'Vis med dagoppløsning'}, 
            {id:2, text:'Vis med timeoppløsning'}, 
            {id:3, text:'Vis periode'}
        ]; 
        this.selectedOption = this.options[0];
    }

    clicked() {
        console.log(this.selectedOption.id);
    }
}

The reason for the assignment this.selectedOption = this.options[0]; is to make sure that one of the radio buttons are initially set. This is all nice and dandy, but when I click on each radio button in turn, the value of the selectedOption variable does not change and the click-handler clicked() will print the value 1 each time. What am I doing wrong?

TIA

Answer 1

Return true from your clicked() method to allow the event to propagate.

Here's a working example:

https://gist.run/?id=84eb0949ff63c3f10a1eff3c337f2c97