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

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

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

Answer 1

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

您可以使用 vm.$set 在一个对象上设置一个属性。如果对象是 react 性的，确保该属性被创建为 react 性属性并触发 View 更新

查看工作 fiddle here .

View 代码:

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