ractivejs / ractive

Next-generation DOM manipulation
http://ractive.js.org
MIT License
5.94k stars 396 forks source link

on change event is not triggering on dropdown change #3352

Open balukantu143 opened 3 years ago

balukantu143 commented 3 years ago

I have a dropdown and with few values and to call a method on dropdown value change. on changing the dropdown value, the function is not invoking. I am unable to figure out the exact issue. Below is the code and let me know are there any errors.

`

    private wireup(): void {
    this.view.on("invokeDorpdownChange", () => this.invokeDorpdownChange());
}

invokeDorpdownChange(): any {
    // Logic
}

<div >
    <select on-change="invokeDorpdownChange">
        <option value="1" selected="selected">Today</option>
        <option value="2">Tomorrow</option>
        <option value="3">This week</option>
        <option value="4">This month</option>
        <option value="5">Next month</option>
    </select>
</div>`
giovannipiller commented 3 years ago

It's quite difficult to help you out with so little info. There's nothing obviously wrong in your code excerpt, though it could be something as simple as a typo (ex. Dorpdown vs. Dropdown). We have no idea of where your "wireup" function is called or how your components are set up.

Could you build a fiddle (ex. using jsfiddle) with enough code to reproduce the issue? You can use this as a starting point: https://jsfiddle.net/nzt7hkba/2/ (I've copied some of your code there)

What version of Ractive are you using? Which browser are you using?

evs-chris commented 3 years ago

As an aside, there's no need to have an event fire to call a method on the ractive instance. You can call it directly from the event listener in the template with @this or its alias @ e.g. <select on-change="@.invokeDropdownChange()">.