v-model 更改时 Watch 未触发

Question

我试图在我的 HTML 中更改日期时触发一个方法。当我更改日期时，它会更新屏幕上的模型 selectedDate ，但就像我的 watch 方法根本看不到更改一样。

<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');
    }
},

---

编辑：为了给这个问题提供更多背景信息，我正在使用导出的模板在模板中运行此代码，如下所示：

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

Answer 1

在输入中有完整日期之前，type="date" 似乎不会触发 input 事件。如果您使用选择器，它会触发，但如果您单独更新每个部分，它不会触发，直到填写月份、日期和年份。https://jsfiddle.net/tg2s4kkq/1/

我要做的是将selectedDate 设置为默认值并标记必填字段，以便用户无法清空它。

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