javascript - 清除表单时出现 Vue + Vuetify 验证问题

问题描述

我正在尝试为我的应用程序构建一些简单的 CRUD 功能，并且我想重复使用相同的表单来创建和更新。

我正在更新的模型是菜单。

我这样做的方式（如果有更好的方法，请告诉我）是通过openForm(menu = null)在新按钮上设置一个方法，我根本不传递菜单，而在我做的编辑按钮上。

openForm 然后检查 menu 是否为 null 以及是否创建一个空的菜单对象。

然后将其存储data()为 menuForForm。

我的表单将其作为道具接收，用于呈现我的表单。

我的问题是，当我使用 Vuetify$refs.form.reset()方法清除表单时，我会收到一大堆与空值相关的错误。这似乎是由于验证规则，好像我删除它们没关系。

我无法理解为什么字段值为 null 会导致这些问题，就好像我将表单绑定到普通data()字段一样，它工作正常。

这是我的代码：

父组件

<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>

表单组件

<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>

这是我得到的错误，我点击清除：

[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)

有谁知道为什么会这样，我已经做了几个小时了，这让我发疯。

标签： javascriptvalidationvuejs2vuetify.js

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

javascript - 清除表单时出现 Vue + Vuetify 验证问题

问题描述

解决方案

推荐阅读