javascript - v模型更改时 watch 未触发

我试图在HTML中更改日期时触发一个方法。当我更改日期时，它正在更新屏幕上选择的型号日期，但它就像我的手表方法根本看不到更改。

<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>

我的手表代码：

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

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

编辑：为了给这个问题提供更多的上下文，我在一个模板中运行这个代码，使用export，如下所示：

<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>

最佳答案

除非输入中有一个完整的日期，否则它看起来不会触发type="date"事件。如果你使用picker，它会开火，但如果你单独更新每一个条目，它不会开火，直到月，日和年被填写。https://jsfiddle.net/tg2s4kkq/1/
我将它设置为默认值，并标记所需字段，以便用户不能清空它。
https://jsfiddle.net/tg2s4kkq/3/