Vue JS將焦點放在輸入的下一個輸入

Question

我有2個輸入，當用戶按Enter鍵時，需要從第一個焦點到第二個焦點。 我試着搭配的jQuery與Vue公司becouse我找不到任何功能，專注在某件事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

你可以嘗試這樣的事情：

v-on:keyup.enter="$event.target.nextElementSibling.focus() 

JSfiddle

Answer 2

一些測試後，它的工作

new Vue({ 
 
    el:'#app', 
 
    methods: { 
 
     nextPlease: function (event) { 
 
     document.getElementById('input2').focus(); 
 
     } 
 
    } 
 
});

<script src="https://vuejs.org/js/vue.js"></script> 
 
<div id='app'> 
 
    <input type="text" v-on:keyup.enter="nextPlease"> 
 
    <input id="input2" type="text"> 
 
</div>

Answer 3

跟進從@zurzui這裏是我認爲使用$refs API（https://vuejs.org/v2/api/#vm-refs）的清潔替代。

使用$refs API，可以讓您以更簡單的方式定位元素而無需遍歷DOM。

Example: https://jsfiddle.net/xjdujke7/1/