요소 UI의 입력 구성 요소와 $ref 사용

요소 UI의 입력 구성 요소와 $ref 사용

사용할 수 있습니까?ref와 함께el-input컴포넌트가 Element-UI에 있나요?사용하려고 합니다.$refsVue 인스턴스를 마운트할 때 입력에 초점을 맞춥니다.코드는 다음과 같습니다.

<div id="app">
    <el-input type="text" ref="test" placeholder="enter text"></el-input>
</div>

그리고 Vue의 경우:

new Vue({
  el: "#app",
  mounted(){
    this.$refs.test.focus()
  }
})

그focus이동해도 방법이 전혀 작동하지 않습니다.this.$refs.test.focus()이벤트를 통해 트리거를 시도합니다.

그$refs오브젝트는 Vue 컴포넌트를 저장하고 있으며 정상적으로 동작하고 있을 것입니다.이 문제는, 유저가, 유저에 대해서focus컴포넌트에는 존재하지 않지만 컴포넌트 템플릿 내의 입력에 존재하는 메서드입니다.

따라서 실제로 입력을 찾으려면 다음과 같은 작업을 수행해야 합니다.

this.$refs.test.$el.getElementsByTagName('input')[0].focus();

지금까지 만들어진 코드 중 가장 예쁜 줄은 아니죠?앱에서 호출하는 대신mountedmethod, 입력에 자동 포커스를 설정하는 경우는, 다음의 조작을 실시합니다.

<el-input type="text" placeholder="enter text" autofocus></el-input>

이것 또한 당신의 문제를 해결할 수 있습니다.

// Focus the component, but we have to wait
// so that it will be showing first.
   this.$nextTick(() => {
       this.$refs.inputText.focus();
   });

이렇게 사용할 수 있습니다.

<div id="app">
    <el-input type="text" ref="test" placeholder="enter text"></el-input>
</div>

this.$refs.test.focus();

https://element.eleme.io/#/en-US/component/input#input-methods

언급URL : https://stackoverflow.com/questions/40989899/using-refs-with-element-uis-input-component