Vue + Vuetify Validation issue when clearing form

Question

I am trying to build some simple CRUD functionality for my app and I want to re-use the same form for both create and update.

my model im updating is Menu.

The way I am doing this (please let me know if there is a better way) is by having a method openForm(menu = null) on the new button I simply dont pass a menu and on the edit button I do.

openForm then checks if menu is null and if it is creates an empty menu object.

This is then stored in data() as menuForForm.

My form receives this as a prop and that is used for rendering my form.

My problem is that when I use the Vuetify $refs.form.reset() method to clear the form I get a whole load of errors relating to null values. It seems this is due to the validation rules as if I remove them its ok.

I can't understnad why a field value being null causes these problems, as if I bind a form to normal data() fields it works fine.

Here is my code:

Parent component

<template>
    <v-flex xs12 sm6 lg4>
        <v_form
            v-if="menuForForm"
            :menu="menuForForm"
            >
        </v_form>
    </v-flex>
</template>

<script>
    data() {
        return {
            menuForForm: null,
            newMenu: {
                id: '',
                label: '',
                url: '',
            },
        }
    },
methods: {
    openMenuForm(menu = null) {
        menu ? this.menuForForm = JSON.parse(JSON.stringify(menu)) : 
        this.menuForForm = this.newMenu;
        this.$store.dispatch('setShowForm', true);
    },
}

</script>

Form component

<template>
    <v-form ref="form" v-model="valid">
        <v-text-field
            v-model="menu.label"
            :rules="labelRules"
            label="Label"
            required
        >
        </v-text-field>
        <v-btn
            color="primary"
            :disabled="!valid"
            @click="submit"
        >
        submit
        </v-btn>
        <v-btn 
              @click="clear"
        >
        clear
        </v-btn>
    </v-form>
</template>

<script>
    data(){
        return{
            valid: true,
            labelRules: [
                v => !!v || 'Name is required',
                v => v.length >= 3 || 'Label must be atleast than 3 characters'
            ], 
        }
    },
    methods:{
        clear() {
            this.$refs.form.reset();
        }
    }

</script>

Here is the error I get one I click clear:

[Vue warn]: Error in callback for watcher "value": "TypeError: Cannot read property 'length' of null"

found in

---> <VTextField>



[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'length' of null"

found in

---> <VTextField>


TypeError: Cannot read property 'length' of null
    at labelRules (Form.vue?c13f:61)

does anyone have any idea why this is happening, I have been on this for hours and its driving me mad.

Answer 1

Your rules should be

data(){
    return{
        valid: true,
        labelRules: [
            v => !!v || 'Name is required',
            v => (v && v.length >= 3) || 'Label must be atleast than 3 characters'
        ], 
    }
}

Because on reset, form will set value to null

Demo: https://codepen.io/ittus/pen/KRGKdK