如何在Ionic-vue应用程序中将焦点设置在``下一步''按钮按下事件上？

问题描述

由于没有使用setFocus方法的示例，我很难通过按android / ios键盘中的下一个按钮将焦点从一个输入更改为另一个输入。

也许这里有人已经做到了？谁能给我看看一些例子吗？

到目前为止我尝试过的事情：

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 |   });

解决方法

您可以通过将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
    }

    },