Vue.js vue材质md输入焦点行为

这是一个奇怪的问题，所以我希望这是有意义的

我有一个登录表单，我正在尝试适应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>

奇怪的行为是，当我点击输入标签时，除非我点击字段的绝对最左边，否则它不会聚焦，我无法输入。因此，如果您想象占位符文本如上所述输入电子邮件地址，除非我右键单击输入中的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材料文档没有说太多

，因为您没有提供“不工作”的示例，我应该特别说明一下。我使用Vue材质，没有任何输入问题，但我们使用md input container元素包装输入，内部没有div，如：

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

在挂载功能中，您可以设置：

this.$refs.emailInput.focus()

---

希望对你有帮助

我太傻了-谢谢你是对的-事实上外层的div覆盖了标签并导致了这个问题，谢谢！

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

this.$refs.emailInput.focus()