Question

我刚开始使用Vue2，在一个页面中我只需要简单的表单提交和验证。问题是当抛出错误时我想在每个表单输入下面显示它但是只有在我开始填写一些输入之后才显示错误，而不是在错误之后立即显示错误。

HTML：

<div class="container" id="app">
<div class="row">
    <div class="col-sm-6 col-md-4 col-md-offset-4">
        <h1 class="text-center login-title">Sign in to continue</h1>
        <div class="account-wall">
            <form method="POST" action="/account/login" @submit.prevent="onSubmit" @keydown="clearErrors($event.target.name)">

                <input type="text" class="form-control" name="email" placeholder="Email" autofocus v-model="email">
                <p class="alert alert-danger" v-if="errors.email" v-text="errors.email"></p>

                <input type="password" class="form-control" name="password" placeholder="Password" v-model="password">
                <div class="alert alert-danger" v-if="errors.password" v-text="errors.password"> </div>

                <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
            </form>
        </div>
    </div>
</div>

和js代码：

    app = new Vue({
    el: '#app',
    data: {
        email: '',
        password: '',
        errors: {}
    },
    methods: {
        onSubmit() {
            axios.post('/account/login', {email: this.email, password: this.password})
                .then(response => alert('Wahoo!'))
                .catch(errors =>
                    Object.keys(errors.response.data).forEach(
                        key => this.errors[key] = errors.response.data[key][0]
                    )
                )
        },
        clearErrors(errorName) {
            delete this.errors[errorName];
        }
    }
});

因此，当捕获错误时，Vue root elemens会更新，但不会显示错误

并且只有在我开始填写其他错误的一些字段之后出现

我知道它可以做得更好，但我需要尽可能快速/简单。谢谢你的帮助!!!

Answer 1

由于您尚未在数据部分中定义<script type="text/javascript"> $(function () { $("#ddlUser").autocomplete({ source: '@Url.Action("FillUsers", "FirebaseNotification")', select:function(event, ui) { var id = ui.item.ID; var name = ui.item.Username; } }); });和<div th:remove="tag" th:utext="${startMsoComment}"></div>  ... variable substitution works here <p style="line-height:0;margin:0;"> </p> <v:roundrect ... variable substitution works here </v:roundrect> ... variable substitution works here <div th:remove="tag" th:utext="${endMsoComment}"></div>，因此它们不是reactive，因此当仅errors.email更改时，这些不会更新DOM。

您可以使用vm.$set 在对象上设置属性。如果对象是被动的，请确保将该属性创建为被动属性并触发视图更新

查看工作小提琴here。

Vue代码：

errors.password

Vue2 v-text工作不正常

1 个答案: