javascript - Vue2 v-text 工作不正确

标签 javascript html vuejs2

我刚刚开始使用 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 根元素会更新,但不会显示错误 enter image description here

只有在我开始填写一些字段后,其他错误才会出现 出现 enter image description here

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

最佳答案

由于您尚未在数据部分定义 errors.emailerrors.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/

相关文章:

javascript - Base64 编码 url 涉及的安全漏洞

javascript - sapui5 sap.ui.table 如何以编程方式取消选中表行的复选框

javascript - 如何让我的函数找到我的输入参数?

html - 如何在 HTML 和 CSS 中进行此布局?

javascript - 使用 CSS 和/或 JavaScript 重叠可堆叠、可点击的形状?

javascript - 鼠标悬停时类更改不可见

javascript - Vuejs 简单的动态 v-show 使用 index 和 falsey v-if 来切换元素

vue.js - Keep-alive 在单个路由上而不是路由器 View 中的所有路由

javascript - 将 v-model 与数组一起使用时,从 vue.js 收到无法读取未定义属性的错误

javascript - jQuery 删除具有特定数据属性的整个脚本