vue 点击事件中获取当前元素的 ref

Question

需求：表单中有多个 Input 输入框，分别为 input1, input2, input3。在 input1 输入完成后，按 Enter 键自动跳转到 input2。 同理，input2 输入完后按 Enter 跳转到 input3。用 ref 方式确实可以实现，但是要做多个方法，或者说多个判断逻辑，有没有更好的方式？

html 部分：

<input ref="wxInput" type="number" @keyup.enter.native="nextInput" .../>
<input ref="aliInput" type="number" @keyup.enter.native="nextInput" .../>
<input ref="unionInput" type="number" @keyup.enter.native="nextInput" .../>

js 部分：

nextInput(e) {
  // e.target.nextSibling.focus() // 无效，currentTarget 同样。获取到的下一个兄弟节点竟然是 <!-- -->
  // e.target.$ref // 有没有办法获取当前元素的 ref 属性（其实这里不能说属性，vue"虚构"出来的）
}

因为这里有自动计算逻辑，所以不好改原有代码。

问题：
有没有好一点的解决方案？或者有没有办法在 元素事件里面获取当前元素的 ref，或 ref 字符串？实在不想写看起来很傻的 case when，if else。

Answer 1

ref是虚拟Dom的属性，而虚拟dom是绑定在组件根元素上的，所以你得JS写法自然获取不到。
你这个不用这么复杂嘛，直接在事件nextInput这里传参就好了 @enter=nextInput($event, 'ref2')这种既保持原event参数，又增加了ref的名字作为参数，会搞吧？
如有帮助望采纳，若有疑惑请描述之~

Answer 2

有个tabIndex 属性你看下 可以控制换行顺序的

Answer 3

应该是nextElementSibling，nextSibling下一个兄弟<!-- -->是必然的。

Answer 4

你既然不想写if else为什么要绑定同一个函数，绑定不同的函数不就可以了

Answer 5

这里为么要加一个.native修饰符？
我在codesandbox上面试了一下是可以的

https://codesandbox.io/embed/...