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

我的 watch 密码:

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/