vue2 Form enter跳转下一个

在Vue 2中，如果你想要在表单提交时，用户按下`Enter`键触发并自动跳转到下一个表单输入项，可以利用HTML的默认行为结合Vue的事件系统。通常，你可以设置表单元素如`<input>`或`<textarea>`的`@keyup.enter="$event.preventDefault(); goNext()"`，其中：

1. `@keyup.enter`是一个键盘事件监听器，当用户按下`Enter`键时触发。
2. `$event.preventDefault()`阻止了表单的默认提交行为，因为通常`Enter`键会提交表单。
3. `goNext()`是你自定义的方法，用于控制程序流程，比如通过`v-for`循环遍历表单字段，并在当前索引+1的位置显示下一个字段。

示例代码如下：

<form @submit.prevent="handleFormSubmit">
  <div v-for="(field, index) in fields" :key="index">
    <input type="text" v-model="field.value" @keyup.enter="goTo(index + 1)">
    <!-- 其他表单控件 -->
  </div>
</form>

<script>
export default {
  data() {
    return {
      fields: [
        { value: '' },
        // ...其他字段...
      ],
    };
  },
  methods: {
    goTo(index) {
      this.$refs.fields[index].focus();
    },
    handleFormSubmit() {
      // 表单验证或提交逻辑
    },
  },
};
</script>

在这里，`$refs.fields`是一个引用，它允许你通过索引来访问每个输入框。当你按下`Enter`时，`goTo`方法会使焦点移动到下一个输入框上，实现了按`Enter`自动跳转的效果。