vueの素材md入力のフォーカス動作

Question

これは奇妙なものなので、これが意味をなされることを願っています。

私はVUEの材料成分を適応しようとしているログインフォームを持っている、それは現在この

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

のように見える奇妙な行動がときということである簡単な

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

にコードを提出ほとんどのフィールドを左にクリックしない限り、入力ラベルをクリックします。フォーカスを取らず、入力できません。だからあなたが上記の "プレースホルダー"のテキストを想像するならば、 "enter e ..."の "e"を右クリックしない限り、それは動作しません！ （またはタブをタップすると、期待どおりのフォーカスが得られます）

そのコードに基づいたアイディアですか？

ログイン・フォームのスタイルは狂気何もしていません。

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

また、誰もが自動素晴らしいことだ最初のメールフィールドを集中する方法を提案することができれば - VUE材料のドキュメントはあまり言っていません（私が見つけた限り）

Answer 1

あなたは '（do not）working'の例を提供していないので、私はespeculate litteでなければなりません。私はVueの材料を使用して、私は、任意の入力の問題を持っていないが、我々は次のように、内部divせずに私たちの入力をラップするmd-input-container要素を使用します。

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

もうご覧になることmin-width: 40vh;だと思います。固定幅（100px）に変更すると、同じ効果が発生しますか？または、あなたの入力にスパンが重なっているかもしれません... Inspectorでデバッグしようとしましたか？

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

とmounted()機能であなたが設定することができます：

this.$refs.emailInput.focus() 

はそれが役に立てば幸い

のように、refオプションを追加することによって、あなたはそれをarchieveできるメールの入力に専念するために

君は！