ant-design-vue 1.X 通过id获取a-input组件失败

小刘今天学前端了吗2025-01-11 20:38

1.ant-design-vue 1.X

问题描述

当我在a-form组件中，以v-decorator指令绑定表单组件时，无法根据我设置的verify-code-input获取元素

html 复制代码

<a-input type="text" 
	id="verify-code-input" 
	class="paIpt"
	:placeholder="$t('register.register_verification_code1')"
    v-decorator="['verifyCode', validatorRules.verifyCode]" />

js 复制代码

document.getElementById('verify-code-input'); // null

原因分析

我查看了网页源码，发现input元素已经有了id="verifyCode"，因此我们设置的verify-code-input无法生效

html 复制代码

<input data-v-58ee6438="" placeholder="Verification Code" type="text" id="verifyCode" data-__meta="[object Object]" data-__field="[object Object]" class="paIpt ant-input">