改变输入类型@focus的Vue方式？答案

【问题标题】：Vue-way to change input type @focus?改变输入类型@focus的Vue方式？
【发布时间】：2021-09-17 11:31:57
【问题描述】：

什么是更改输入元素类型 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>'

【问题讨论】：

标签： javascript typescript vue.js vuejs3 vue-composition-api

【解决方案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>

【讨论】：