Vue 更改输入类型@focus 的方式？

Question

更改输入元素类型 onfocus 的首选 Vue 方法是什么？ i.e. onfocus="this.type = 'date'"

具体来说，我想利用占位符属性.

将输入类型从文本切换为日期

尝试：

<template>
    <input
        type="text"
        placeholder="Birthday"
        value="foo"
        @focus="setType('date')"
        @blur="setType('text')"
    />
</template>
<script>
    ...
    export default defineComponent({
        setup(){
            const el = ref<HTMLInputElement>()
            const setType = (x: string) => el.type = x

            return {el, setType}
        }
    })
</script>

错误：

Property 'type' does not exist on type 'Ref<HTMLInputElement | undefined>'

Answer 1

添加另一个名为 elType 的属性并将其绑定到 type 属性：

<template>
    <input
        :type="elType"
        placeholder="Birthday"
        value="foo"
        @focus="setType('date')"
        @blur="setType('text')"
    />
</template>
<script>
    ...
    export default defineComponent({
        setup(){
            const el = ref<HTMLInputElement>()
           const elType=ref('text')
            const setType = (x: string) => elType.value = x

            return {el, setType,elType}
        }
    })
</script>

Vue 更改输入类型@focus 的方式？

Vue-way to change input type @focus?

javascript

typescript

vue.js

vuejs3

vue-composition-api