how to create an observable on a multi select drop down in aurelia

Question

i currently have a dropdown that when a user goes and clicks on a single option it automatically gets me the value for filtering as an observable as follows

public months: any=[];
@observable
    public selectedMonth: string= "";
async onLoad() {
        this.months = Moment.months();
        }
public selectedMonthChanged() {
        if (this.selectedMonth != "") {
            this.update();
        }
        
    }
<select  md-select value.bind="selectedMonth">
                        <option value="" disabled>Month</option>
                        <option repeat.for="month of months" value.bind="month" click.delagate="selectedMonthChanged()">${month}</option>
                    </select>

so the above works when i select an option it calls the selectedMonthChanged() function.But now i am trying to add a multiselect as follows and i cant get back a list of the items selected and it doesnt call the selectedMonthChanged() function

this is what i tried

public months: any=[];
    @observable
        public selectedMonth: any = [];
    async onLoad() {
            this.months = Moment.months();
            }
    public selectedMonthChanged() {
            if (this.selectedMonth != []) {
                this.update();
            }
            
        }
    <select  multiple md-select value.bind="selectedMonth">
                            <option value="" disabled>Month</option>
                            <option repeat.for="month of months" value.bind="month" click.delagate="selectedMonthChanged()">${month}</option>
                        </select>

any idea how i could pass a list of values as an observable?

Answer 1

A few things here. I believe the problem lies with the option having value.bind instead of having model.bind as per the Aurelia 1 docs.

Secondly I wanted to mention that if you're using Aurelia 2 the @obserable annotation is a little wonky atm even with the latest version. I suggest using the @watch annotation anyway for better code readability. I believe this is only available in Aurelia 2 but it might be available in Aurelia 1. Been using Au2 now for awhile.

selectedMonth;

@watch('selectedMonth')
someFunctionName() {
   if (this.selectedMonth != []) {
      this.update();
   }
}

As a note this works for as deep as you'd like into the object. @watch('someObject.someObject.someObject.someProperty') Pretty neat. Can apply multiple @watch annotations to a single function as well.