vue.js - Vuejs Typescript klassekomponent refs.focus fungerer ikke

Jeg bruker Typescript Class-komponent og jeg har dette problemet: Jeg kan ikke bruke this.$refs..focus()

Mal kode:

 <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>

Dette inndataboksen er inne i en popup.

Typescript-kode:

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

Så får jeg denne feilen:

dette problemet er fikset i dette spørsmålet Vuejs typescript this.$refs..value eksisterer ikke lagt til:

  $refs!: {
    searchBoard: HTMLInputElement;
  };

Jeg får en Ny Feil i konsollen min

[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

er det en måte å gjøre dette på?

Svar #1

Når det gjelder bruk av setTimeout:

Basert på tidspunktet for koden din, ser det ut til at din isShown-egenskap styrer om $refs.searchBoard gjengis i DOM-en eller ikke. I stedet for setTimeout, anbefaler Vue å bruke $nextTick for å utsette en handling til neste DOM-syklus:

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

Angående $refs:

Et litt renere alternativ til $refs-typeutvidelsen i klassen din er å bruke @Ref:

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

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

Svar #2

Jeg klarte å få det til å fungere, jeg la til .focus() inne i setTimeout().

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

    setTimeout(() => {
      this.$refs.searchBoard.focus();
    }, 50);
  }

Relaterte artikler