CODEWITHSUNDEEP
javascripthtmlvue.jsvue-component
emrea
emrea

Reputation: 137

On Change Not Getting Fired In Vue Template

I’m a newbie in Vue. I’ve created a form component which includes a select. I want to use a custom function when this select changed. I’ve searched in this forum and in the web also and I tried lots of codes, but the function didn’t fired. Here is my form template:

<template>

<form method="post" action="/Home/Register">

    <div class="form-row">

        <div class="form-title">

            <label for="EventId">
                Choose *
            </label>

        </div>

        <div class="form-input">

            <select class="form-control" name="EventId" id="EventId" @change="onSelectChange">
                <option value="" disabled>Please Select...</option>
                <option :value="item.Id" :data-price="item.EventPrice" v-for="item in model.Events">{{ item.EventName }}</option>
            </select>

        </div>

    </div>

    <div class="form-row">

        <div class="row" style="justify-content: center;">

            <button class="btn btn-success">
                Register
            </button>

        </div>

    </div>


</form>

Script tag for template:

export default {
        props: ["model"],
        methods: {
            onSelectChange : function(event) {
                console.log(event);
            }
        }
    }

I’ve also tried v-model for select but no luck. I’ve put a breakpoint inside the generated js code by vue in Chrome, “change” function isn’t getting triggered.

Any help would be appreciated.
Thanks,

Update

I'm grateful for all of the answers and comments, but I need to explain this issue is for only "Vue Template" files. I have a "RegistryForm.vue" template file and I'm building this file with webpack. I need to get selected option value when it changed in this template file. My "onSelectChange" event doesn't triggered and still I'm searching for the solution. These template files were the most important reason for choosing Vue as Javascript framework for us. And if we can't fix this problem, we should develop our system from scratch with another framework.
Thanks for helping again.

Upvotes: 0

Views: 2045

Answers (1)

Efrat Levitan
Efrat Levitan

Reputation: 5612

try passing the event to your onSelectChange method. this works for me:

<form method="post" action="/Home/Register">
    <div class="form-row">
        <div class="form-title">
            <label for="EventId">
                Choose *
            </label>
        </div>
        <div class="form-input">
            <select class="form-control" name="EventId" id="EventId" @change="onSelectChange($event)"> 
                <option value="" disabled>Please Select...</option>
                <option :value="item.Id" :data-price="item.EventPrice" v-for="item in model.Events" >{{ item.EventName }}</option>
            </select>

        </div>

    </div>

    <div class="form-row">

        <div class="row" style="justify-content: center;">

            <button class="btn btn-success">
                Register
            </button>

        </div>

    </div>
</form>

Upvotes: 1

Related Questions