我正在尝试为我的应用程序构建一些简单的CRUD功能,我想重新使用相同的表单进行创建和更新。
我的模型即时更新是菜单。
我这样做的方式(请告诉我,如果有更好的方法)是通过在新按钮上设置方法openForm(menu = null)
我根本不通过菜单和我做的编辑按钮。< / p>
然后,
openForm检查菜单是否为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)
有没有人知道为什么会发生这种情况,我已经持续了好几个小时而且让我发疯了。
答案 0 :(得分:3)
您的规则应该是
data(){
return{
valid: true,
labelRules: [
v => !!v || 'Name is required',
v => (v && v.length >= 3) || 'Label must be atleast than 3 characters'
],
}
}
因为在重置时,表单会将值设置为null