0

我在尝试通过按下 android/ios 键盘中的下一个按钮将焦点从一个输入更改为另一个输入时遇到困难，因为没有使用 setFocus 方法的示例。

也许这里有人已经实现了这一点？谁能给我看一些例子？

到目前为止我已经尝试过：

Form.vue

<template>
  <form @submit.prevent="onSubmit">
    <form-input
      enterkeyhint="next"
      v-model="email"
      @keyup.enter="changeFocus('password')"
    />

    <form-input
      ref="password"
      v-model="password"
    />
  </form>
</template>

<script lang="ts">
  // ... some import statements

  export default defineComponent({
    setup() {
      const email = ref("");
      const password = ref("");

      return {
        email,
        password,
      };
    },
    methods: {
      changeFocus(nextFocus: string): void {
        this.$refs[nextFocus].setFocus();
      },
    },
  });
</script>

errors

TS2571: Object is of type 'unknown'.
[vue-cli-service]     80 |     methods: {
[vue-cli-service]     81 |       changeFocus(nextFocus: string): void {
[vue-cli-service]   > 82 |         this.$refs[nextFocus].setFocus();
[vue-cli-service]        |         ^^^^^^^^^^^^^^^^^^^^^
[vue-cli-service]     83 |       },
[vue-cli-service]     84 |     },
[vue-cli-service]     85 |   });
4

1 回答 1

0

您可以通过将 ref 模板定义为属性并在事件处理程序中使用来使用它：

<template>
  <form @submit.prevent="onSubmit">
    <form-input
      enterkeyhint="next"
      @keyup.enter="changeFocus('password')"
    />

    <form-input
      ref="password"
    />
  </form>
</template>

<script lang="ts">
  // ... some import statements

  export default defineComponent({
    setup() { 
    const password=ref<string>("")
    function changeFocus(nextFocus: string): void {
        password.value.focus()
      }
    return{
      changeFocus, password,email
    }

    },
于 2020-09-15T21:09:09.427 回答