Vue JS关注输入的下一个输入

Question

我有2个输入,当用户按Enter键时,希望切换焦点从第一个到第二个.我尝试将jQuery与Vue混合因为我找不到任何功能可以专注于Vue文档中的某些内容:

<input v-on:keyup.enter="$(':focus').next('input').focus()"
    ...>
<input  ...>

但在输入时我看到控制台中的错误:

build.js:11079 [Vue warn]: Property or method "$" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in anonymous component - use the "name" option for better debugging messages.)warn @ build.js:11079has @ build.js:9011keyup @ build.js:15333(anonymous function) @ build.js:10111
build.js:15333 Uncaught TypeError: $ is not a function

Answer 1

你可以尝试这样的事情:

<input v-on:keyup.enter="$event.target.nextElementSibling.focus()" type="text">

的jsfiddle

Answer 2

在我看来，从@zurzui跟进是使用$refsAPI（https://vuejs.org/v2/api/#vm-refs）的一种更干净的选择。

使用$refsAPI，可以使您以更简单的方式定位元素，而无需遍历DOM。

示例：https：//jsfiddle.net/xjdujke7/1/