Я пытаюсь создать простую функцию CRUD для своего приложения и хочу повторно использовать одну и ту же форму для создания и обновления.
моя модель, которую я обновляю - это Меню.
Способ, которым я делаю это (пожалуйста, дайте мне знать, если есть лучший способ), - с помощью метода openForm(menu = null) на новой кнопке я просто не пропускаю меню, а на кнопке редактирования, которую я делаю.
openForm затем проверяет, является ли меню пустым, и создает ли оно пустой объект меню.
Это затем сохраняется в data() как menuForForm.
Моя форма получает это как опору, которая используется для визуализации моей формы.
Моя проблема в том, что когда я использую метод Vuetify $refs.form.reset() для очистки формы, я получаю массу ошибок, связанных с нулевыми значениями. Кажется, это связано с правилами валидации, как будто я их удаляю, все в порядке.
Я не могу понять, почему значение поля, равное нулю, вызывает такие проблемы, как будто я связываю форму с обычными 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)
Кто-нибудь знает, почему это происходит, я занимаюсь этим часами, и это сводит меня с ума.