我刚刚开始使用 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];
}
}
});
我知道它可以做得更好,但我需要它尽可能快速/简单。感谢您的帮助!!!
最佳答案
由于您尚未在数据部分定义 errors.email
和 errors.password
,因此它们不是 reactive ,因此当只有 errors.email
更改时,这些不会更新 DOM。
您可以使用vm.$set 设置对象的属性。如果对象是响应式的,请确保该属性被创建为响应式属性并触发 View 更新
查看工作 fiddle here .
Vue 代码:
methods: {
onSubmit() {
setTimeout(() => {
this.$set(this.errors, 'email', 'email errror')
this.$set(this.errors, 'password', 'password errror')
}, 300)
},
关于javascript - Vue2 v-text 工作不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41822056/