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/

当v模型改变时，Watch不会触发

1 个答案: