1

我正在使用 Typescript Class 组件,但我遇到了无法使用的问题this.$refs.<refname>.focus()

模板代码:

 <header class="py-2 px-1 m-0 row">
    <input
      type="text"
      class="form-control m-1"
      ref="searchBoard"
      placeholder="Find boards by name..."
    />
  </header>

此输入字段位于弹出窗口中。

打字稿代码:

import { Component, Vue } from "vue-property-decorator";

@Component
export default class BoardList extends Vue {

  // I added this to solve the compile error
  $refs!: {
    searchBoard: HTMLInputElement;
  };

  isShown = false;

  toggleDropdown() {
    this.isShown = !this.isShown;
    this.$refs.searchBoard.focus();
  }
} 

然后我得到这个错误:

在此处输入图像描述

此问题已在此问题中修复Vuejs typescript this.$refs..value does not exist 添加:

  $refs!: {
    searchBoard: HTMLInputElement;
  };

我的控制台出现新错误

[Vue warn]: Error in v-on handler: "TypeError: this.$refs.searchBoard is undefined"

found in

---> <BoardList> at src/components/boards/buttons/BoardList.vue
       <NavbarTop> at src/components/NavbarTop.vue
         <ComponentName> at src/App.vue
           <Root> vue.runtime.esm.js:619
    VueJS 

7

有没有办法做到这一点?

4

3 回答 3

6

关于使用setTimeout

根据您的代码时间,您的属性似乎isShown控制着是否$refs.searchBoard在 DOM 中呈现。setTimeoutVue 建议使用$nextTick将操作推迟到下一个 DOM 周期,而不是:

toggleDropdown() {
  this.isShown = !this.isShown
  this.$nextTick(() => this.$refs.searchBoard.focus())
}

关于$refs

$refs类中类型扩展的一个稍微干净的替代方法是使用@Ref

@Component
export default class BoardList extends Vue {
  @Ref() readonly searchBoard!: HTMLInputElement

  toggleDropdown() {
    this.isShown = !this.isShown
    this.$nextTick(() => this.searchBoard.focus())
  }
}
于 2020-02-11T21:02:31.650 回答
0

我能够使它工作,我.focus()在里面添加了setTimeout().

  toggleDropdown() {
    this.isShown = !this.isShown;

    setTimeout(() => {
      this.$refs.searchBoard.focus();
    }, 50);
  }
于 2020-02-11T18:49:52.070 回答
0

试试这个

toggleDropdown() {
    this.isShown = !this.isShown;
    this.$refs.searchBoard.$el.focus();
}
于 2021-04-20T07:43:11.973 回答