vuejs의 다른 컴포넌트 내부에 있는 입력에 초점을 맞추고 있습니까?

vuejs의 다른 컴포넌트 내부에 있는 입력에 초점을 맞추고 있습니까?

특정 키가 입력되면 입력란에 집중할 수 있도록 하고 싶습니다.초점을 맞추고 싶은 입력은 autocomplete-vue 내부에 존재합니다.이렇게 부르죠.

<autocomplete v-shortkey="['alt', 's']"
              @shortkey.native="theAction()"
              ref="autocompleteInput" 
></autocomplete>

입력에 초점을 맞추고 싶은 액션 방식은 다음과 같습니다.

theAction () {
      this.$refs.autocompleteInput.$el.focus()
    }

내가 원하는 게 아닌 섹션 전체에 초점을 맞춰야 해입력은 theAction이 초점을 맞춘 안에 2개의 div가 있습니다.그 후의 관점에서는, 이것은this.$refs.autocompleteInput.$el반환:

<div>
  <div data-position="below" class="autocomplete"> 
     <input role="combobox" class="autocomplete-input"> 
  </div>
</div>

class autocomplete-input으로 입력에 집중할 수 있는 방법이 없을까요?어떤 제안이라도 도움이 됩니다!

참조를 에 추가합니다.autocomplete의 컴포넌트<input>초점을 맞추는 방법을 추가합니다.

<input role="combobox" class="autocomplete-input" ref="input"> 

methods: {
  focus() {
    this.$refs.input.focus()
  }
}

이렇게 부모 컴포넌트에서 호출할 수 있습니다.

this.$refs.autocompleteInput.focus()

언급URL : https://stackoverflow.com/questions/70616532/focus-on-an-input-that-is-located-inside-another-component-in-vuejs