VueJs 使用 Vuelidator 验证输入值并获取错误

Question

阅读 this link 中 Vuelidator 的文档后，当我尝试使用此 javascript 包时出现此错误：

[Vue warn]: Error in v-on handler: "TypeError: target is undefined"

正在我的项目里面安装包 app.js:

import Vue from "vue";

const {default: Vuelidate} = require('vuelidate')
Vue.use(Vuelidate)
require('./bootstrap');


window.Vue = require('vue').default;

new Vue({
    components:
        {
            //...
        }
}).$mount('#app');

和user-profile组件内容：

import {mapGetters, mapMutations} from "vuex";

import { required, minLength, between } from 'vuelidate/lib/validators'

export default {
    props: [
        'user'
    ],
    data() {
        const userInfo = this.user;
        return {
            name: userInfo.name,
        }
    },
    validations: {
        name: {
            required,
            minLength: minLength(4)
        }
    },
    computed: {
        //...
    },
    methods: {
        change_name({target}) {
            this.$store.commit('change_name', target)
            this.$v.name.$touch()
        }
    }
};

然后html输入标签：

<input v-model.trim="name" type="text" name="name" dir="auto"
       @input="change_name($event.target.value)"
       class="form-control">

为什么我会收到 "TypeError: target is undefined" 错误，我该如何解决这个问题？提前致谢

Answer 1

在您的 change_name 方法中，您正在对字符串使用解构赋值。只需删除大括号。将 change_name({target}) 更改为 change_name(target)。

您也可以考虑将 target 参数的名称更改为更方便的名称，例如 newName.

VueJs 使用 Vuelidator 验证输入值并获取错误

VueJs using Vuelidator for validating input values and getting error

javascript

vue.js

vuejs2

vuelidate