Vue 3 Composition API，使用 valueAsDate 属性设置日期输入

Question

我的页面上有一个日期选择器，我用今天的日期对其进行了初始化。在移植到 Vue 之前，我使用了：

document.getElementById("entryDate").valueAsDate = new Date()

由

提供

但这在 Vue 中对我不起作用。显然我需要访问元素本身来获取 valueAsDate 属性，所以我这样做：

const entryDate = ref(null)
const entryDateElem = ref(null)

onMounted(() => {
  entryDateElem.value.valueAsDate = new Date()
})

在我的模板中：

<input type="date" ref="entryDateElem" v-model="entryDate"></input>

但日期选择器值未更改。如果我在同一个 Stack Overflow post（直接设置值）中使用替代答案，它确实会按预期工作。

onMounted(() => {
  entryDate.value = new Date().toISOString().substr(0, 10)
})

但为什么 valueAsDate 不起作用？我检查过 entryDateElem.value 指的是有问题的元素。

Answer 1

在 vue 中，不建议使用 vanilla JS 操作 DOM，因为 Vue 是数据驱动的框架，这意味着您的输入应绑定到数据属性并且它会根据该数据进行更改数据不是通过将原始数据分配给它的属性，如：

entryDateElem.value.valueAsDate = new Date() // you're manipulating directly the DOM ❌

正确的方法：

entryDate.value = new Date() // you're manipulating the data ✔

Vue 3 Composition API, setting date input using the valueAsDate property