輸入標簽上的 v-model w/類型日期

Question

我一直在尋找解決方案，但我似乎無法弄清楚，但這很簡單。 因此，如果有人知道修復方法，請告訴我。

我想對輸入類型的日期標簽進行 v-model，所以這是一個示例

HTML：

<input type="email" v-model="Email" id="email" required />
<input type="date" v-model="Date" id="myDate" required />

VUE：

data() {
  return {
    Email: '',
    Date: '',
  };
}

現在，這實際上工作得很好，但我在輸入日期之前收到警告。

前任。 我在 email 輸入中輸入的每個字符在將其輸入到日期輸入之前我在控制台中得到了這個

The specified value "function Date() { [native code] }" does not conform to the required format, "yyyy-MM-dd".

我輸入的每個字符都會收到此警告

但是，只要有人知道如何解決此警告，它就會再次起作用

Answer 1

您可以將 model 的更新推遲到change事件，而不是使用.lazy修飾符的默認input ：

<input type="date" v-model.lazy="Date" id="myDate" required />

文檔鏈接： https://vuejs.org/guide/essentials/forms.html#lazy

Answer 2

如果有人遇到這個問題，我能夠解決它，不確定這是否是最好的方法，但它沒有問題。

模板：

<input
  type="date"
  :value="new Date().toISOString().substr(0, 10)"
  class="form-control"
  id="date"
  @input="HandleDate($event.target.value)"
  required
/>

視圖：

data() {
  return {
    Date: '',
  };
},
methods: {
 HandleDate(DateInput) {
   this.Date = DateInput;
 },
}