碰到一个需求,在<el-input ref="promptInput" type="textarea">
中,使用
this.$nextTick(() => {
this.$ref.promptInput.focus();
});
出现了报错。
具体报错为
this.$refs.promptInput.focus is not a function
打印一下this.$refs.promptInput发现有值,但是找不到focus方法
问题在于直接给el-input绑定一个ref取到的是textarea外面的那层div
并没有真正的拿到textarea
分析一下 this.$refs.promptInput 的打印值,外面的那层div只有change,input,blur方法,focus是直接绑在textarea上面的
实测正确的写法为:
this.$nextTick(() => {
this.$refs?.promptInput?.$children[0]?.$refs?.textarea?.focus();
});
或者更简单一点:
this.$nextTick(() => {
this.$refs?.promptInput?.$children[0]?.focus();
});
另一种写法,直接用querySelector,不用ref
this.$nextTick(() => {
document.querySelector('textarea').focus();
});
如果有多个
this.$nextTick(() => {
document.querySelectorAll('textarea')[1].focus();
});