VueJs using Vuelidator for validating input values and getting error

Question

After reading document of Vuelidator in this link, when i try to use this javascript package i get this error:

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

installing the package in my project inside 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');

and user-profile component content:

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()
        }
    }
};

and then html input tag:

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

why i get "TypeError: target is undefined" error and how can i resolve this issue? thanks in advance

Answer 1

In your change_name method, you are using destructuring assignment on string. Just remove curly brackets. Change change_name({target}) to change_name(target).

Also you may consider to change name of target argument to something more convenient like newName.