시각 자료 입력 포커스 동작

Question

이것은 이상한 것이므로 이해가되기를 바랍니다.

나는 내가 VUE 물질 구성 요소에 적응하기 위해 노력하고있어 로그인 양식을 가지고, 그것은 현재 때 간략한

methods: { 
     submit() { 
      console.log('login...'); 
     } 
} 

이상한 행동 코드를 제출이

<template> 
<md-layout> 
    <md-layout md-flex="100" md-align="center"> 
    <form class="login-form" role="form" @submit.prevent="submit"> 
     <md-input-container> 
      <div v-bind:class="{ 'has-error': errors.email }"> 
       <label>enter email address</label> 
       <md-input v-model="email" required></md-input> 
       <span class="help-block" v-if="errors.email">{{ errors.email[0] }}</span> 
      </div> 
     </md-input-container> 
     <md-input-container> 
      <div v-bind:class="{ 'has-error': errors.password }"> 
       <label>enter password</label> 
       <md-input type="password" v-model="password" required></md-input> 
       <span class="help-block" v-if="errors.password">{{ errors.password[0] }}</span> 
      </div> 
     </md-input-container> 
     <md-button class="md-raised md-primary">Login</md-button> 
    </form> 
    </md-layout> 
</md-layout> 
</template> 

처럼되어 보이는 절대 레이블을 클릭하지 않는 한 입력 레이블을 클릭합니다. 초점을 맞추지 않아 입력 할 수 없습니다. 그래서 위의 "전자 메일 주소 입력"과 같은 자리 표시 자 텍스트를 상상해보십시오. "enter ..."에서 "e"를 오른쪽 클릭하지 않으면 작동하지 않습니다! (또는 탭을 탭하면 예상대로 초점을 맞 춥니 다)

해당 코드를 기반으로 작성된 아이디어가 있습니까? VUE 물질 문서는 많은 말을하지 않습니다 - 사람이 자동 좋을 것 첫 번째 이메일 필드를 집중하는 방법을 제안 할 수있는 경우,

.login-form { 
    background: #FFFFFF; 
    min-width: 40vh; 
    padding: 65px; 
    text-align: center; 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 
} 

또한 :

로그인 - 양식 스타일

미친 아무것도하지 않습니다 (내가 아는 한)

Answer 1

'(작동하지 마십시오)'예제를 제공하지 않으므로 especulate litte를 사용해야합니다. 나는 뷰 소재를 사용하고 난 어떤 입력 문제가 발생하지 않지만, 우리는 같은 내부 div없이 우리의 입력을 포장하기 위해 md-input-container 요소를 사용 : 다른는보고가 min-width: 40vh;입니다 취할 생각

<md-input-container> 
    <label>Initial value</label> 
    <md-input v-model="initialValue"></md-input> 
</md-input-container> 

. 고정 너비 (예 : 100px)로 변경하면 여전히 동일한 효과가 발생합니까? 또는 스팬이 입력 위에 겹쳐져 있습니다 ... Inspector을 사용하여 디버그를 시도 했습니까?

<md-input v-model="email" required ref='emailInput' ></md-input> 

과 mounted() 기능에 설정할 수 :

this.$refs.emailInput.focus() 

는에 도움이되기를 바랍니다

처럼 ref 옵션을 추가하여 당신이 그것을 archieve 수있는 이메일 입력에 집중하기 위해

당신!