Question

这是一个奇怪的，所以我希望这是有道理的。

我有一个登录表单，我试图调整vue材料组件，它目前看起来像这样

    public static void main(final String[] args)
    {
        final ComparableValue<Integer> integerValue = new ComparableValue<>(10);
        integerValue.eq(10);           // will compile
        integerValue.gt(5);            // will compile
        integerValue.match("hello");   // will not compile

        final StringValue stringValue = new StringValue("Foo");
        stringValue.eq("Foo");         // will compile
        stringValue.gt("bar");         // will compile
        stringValue.match("foo");      // will compile
    }

简要提交代码

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

奇怪的行为是，当我点击输入标签时，除非我单击绝对最左边的字段，否则它不会聚焦，我无法输入它。因此，如果你想象上面的占位符文本＆＃34;输入电子邮件地址＆＃34;，除非我点击＆＃34; e＆＃34;在＆＃34;输入....＆＃34;，它不起作用！（或者如果我插入它，它将按预期进行聚焦）

基于该代码的任何想法？

登录表单样式没有做任何疯狂的事情：

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

此外，如果有人可以建议如何自动关注第一个很棒的电子邮件字段 - vue材料文档不会说太多（据我所知）

Answer 1

因为你没有提供一个（不要）工作的＆＃39;例如，我应该especulate一个小小的。我使用Vue-material并且没有任何输入问题，但是我们使用md-input-container元素来包含我们的输入，而不包含div，例如：

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

另一个想看的是min-width: 40vh;。如果将其更改为固定宽度（即100px），仍会出现相同的效果？或者跨度与您的输入重叠...您是否尝试使用Inspector进行调试？

为了专注于电子邮件输入，您可以通过添加ref选项来实现它，例如：

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

并在mounted()函数中设置：

this.$refs.emailInput.focus()

希望对你有所帮助！

vue材料md-输入焦点行为

1 个答案: