Vue2 v-text 工作不正确

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 根元素会更新，但不会显示错误

只有在我开始填写一些字段后，其他错误才出现出现

我知道它可以做得更好，但我尽可能 quick/simple 需要它。感谢您的帮助！！！

Answer 1

由于你没有在数据部分定义errors.email和errors.password，它们不是reactive，所以当只有errors.email改变时，这些不会更新DOM.

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

查看工作 fiddle here。

Vue代码：

methods: {
  onSubmit() {
      setTimeout(() => {
        this.$set(this.errors, 'email', 'email errror')
        this.$set(this.errors, 'password', 'password errror')
      }, 300)
    },

Vue2 v-text 工作不正确

Vue2 v-text works incorrectly

html

javascript

vuejs2