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

原文由 Ivan Borshchov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以尝试这样的事情：

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

JSfiddle 示例

更新

如果目标元素在 form 元素中并且下一个表单元素不是真正的同级元素，那么您可以执行以下操作：

html

 <form id="app">
  <p>{{ message }}</p>

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

  <div>
      <input type="text">
  </div>

</form>

js

 new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    focusNext(elem) {
      const currentIndex = Array.from(elem.form.elements).indexOf(elem);
      elem.form.elements.item(
        currentIndex < elem.form.elements.length - 1 ?
        currentIndex + 1 :
        0
      ).focus();
    }
  }
})

JSFiddle 示例

原文由 yurzui 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在我看来，从@zurzui 跟进是使用 $refs API（ https://v2.vuejs.org/v2/api/#vm-refs ）的更清洁的替代方案。

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

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

原文由 Blake Newman 发布，翻译遵循 CC BY-SA 4.0 许可协议