CODEWITHSUNDEEP
javascriptvue.jsvuejs2
twigg
twigg

Reputation: 3993

Watch is not firing when v-model changes

I'm trying to trigger a method when a date is changed in my HTML. When I change the date it is updating the model selectedDate on the screen but its like my watch method just isn't seeing the change at all.

<div class="col-md-8">
    <h3>Daily Summary - {{ selectedDate }}</h3>
</div>
<div class="col-md-4">
    <p>Change date</p>
    <input type="date" name="date" v-model="selectedDate">
</div>

My watch code:

data() {
    return{
        selectedDate: null
    }
},

watch: {
    selectedDate: function(){
        console.log('date changed');
    }
},

Edit: To give more context to the question, I'm running this code inside a template using export like so:

<template>  
    <div>

    <div class="col-md-8">
        <h3 v-on:click="testEvent(event)">Daily Summary - <span v-if="data.nxt_summary">{{ selectedDate }}</span></h3>
    </div>
    <div class="col-md-4">
        <p>Change date</p>
        <input type="date" name="date" v-model="selectedDate">
    </div>

    </div>
</template>

<script>
export default {

    data() {
        return{
            selectedDate: null
        }
    },

    watch: {
        selectedDate: function(){
            console.log('date changed');
        }
    },

}
</script>

Upvotes: 1

Views: 4177

Answers (1)

Bill Criswell
Bill Criswell

Reputation: 32921

It doesn't look like type="date" fires an input event till there's a whole date in the input. If you use the picker it'll fire, but if you update each piece separately it won't fire till the month, day AND year is filled in. https://jsfiddle.net/tg2s4kkq/1/

What I'd do it set selectedDate to a default value and mark the field required so the user can't empty it.

https://jsfiddle.net/tg2s4kkq/3/

Upvotes: 3

Related Questions