I'm trying to reuse the dialog form but when trying to update Vuelidate says the form is invalid, I'm not sure why. This is my code.
<b-modal size="lg" ref="my-modal" hide-footer :title="modalTitle + ' User'">
<form @submit.prevent="onSubmit" @reset.prevent="onReset">
<b-row>
<b-col>
<b-form-input id="input-name"
v-model="form.name"
@input="$v.form.name.$touch()"
:state="$v.form.name.$dirty ? !$v.form.name.$error : null"
placeholder="Name"
trim></b-form-input>
</b-col>
<b-col>
<b-form-input id="input-email"
v-model="form.email"
@input="$v.form.email.$touch()"
:state="$v.form.email.$dirty ? !$v.form.email.$error : null"
placeholder="Email"
trim></b-form-input>
</b-col>
</b-row>
<b-row v-if="mode === 0">
<b-col>
<b-form-input id="input-password"
v-model="form.password"
@input="$v.form.password.$touch()"
:state="$v.form.password.$dirty ? !$v.form.password.$error : null"
type="password"
placeholder="Password"
trim></b-form-input>
</b-col>
<b-col>
<b-form-input id="input-password-confirm"
v-model="form.password_confirmation"
@input="$v.form.password_confirmation.$touch()"
:state="$v.form.password_confirmation.$dirty ? !$v.form.password_confirmation.$error : null"
type="password"
placeholder="Password Confirmation"
trim></b-form-input>
</b-col>
</b-row>
<b-button v-if="mode === 1"
class="mb-1"
:class="visible ? null : 'collapsed'"
:aria-expanded="visible ? 'true' : 'false'"
aria-controls="collapse-4"
@click="visible = !visible">Change Password
</b-button>
<b-collapse v-model="visible" class="mt-2">
<b-form-input id="input-password-edit"
v-model="form.password_edit"
@input="$v.form.password_edit.$touch()"
:state="$v.form.password_edit.$dirty ? !$v.form.password_edit.$error : null"
type="password"
placeholder="New Password"
trim></b-form-input>
</b-collapse>
<b-row>
<b-col>
<b-form-select :options="roles"
v-model="form.role"
@input="$v.form.role.$touch()"
:state="$v.form.role.$dirty ? !$v.form.role.$error : null"
placeholder="User Role"></b-form-select>
</b-col>
</b-row>
<b-row align-h="end" style="padding-left: 1rem; padding-right: 1rem">
<b-button class="mr-1" @click="cancel" variant="secondary">Cancel</b-button>
<b-button type="submit" variant="primary">Save</b-button>
</b-row>
</form>
</b-modal>
data() {
return {
url: '/users',
form: {
name: '',
email: '',
password: '',
password_confirmation: '',
password_edit: '',
role: ''
},
users: [],
roles: [],
}
},
validations: {
form: {
name: {
required
},
email: {
required,
email
},
password: {
required: requiredIf(this.modalTitle() === 'New')
},
password_confirmation: {
required: requiredIf(this.modalTitle() === 'New'),
sameAsPassword: sameAs('password')
},
role: {
required
},
password_edit: {
required: requiredIf(this.modalTitle() === 'Edit')
}
}
},
methods: {
create() {
this.onReset();
this.mode = 0;
this.$refs['my-modal'].show();
},
edit(item) {
this.onReset();
this.mode = 1;
this.form = _.cloneDeep(item);
this.form.role = this.form.roles[0]['id'];
this.$refs['my-modal'].show();
},
onSubmit() {
this.$v.$touch()
console.log(this.$v.invalid);
if (!this.$v.$invalid) {
if (this.mode === 0) {
this.$inertia.post(this.url, {
name: this.form.name,
email: this.form.email,
password: this.form.password,
password_confirmation: this.form.password_confirmation,
role: this.form.role,
}).then(
() => {
if (Object.entries(this.$page.props.errors).length === 0) {
this.$refs['my-modal'].hide();
this.onReset();
this.$bvToast.toast('New User Created', {
title: 'Action Successful',
variant: 'success',
toaster: 'b-toaster-top-center',
solid: true
});
}
}
)
} else {
console.log('here')
this.$inertia.put(this.url + '/' + this.form.id, {
name: this.form.name,
email: this.form.email,
role: this.form.role,
password_edit: this.form.password_edit
}).then(
() => {
if (Object.entries(this.$page.props.errors).length === 0) {
this.$refs['my-modal'].hide();
this.onReset();
this.$bvToast.toast('User Updated', {
title: 'Action Successful',
variant: 'success',
toaster: 'b-toaster-top-center',
solid: true
});
}
}
)
}
}
},
},
In the onSubmit() if I add a console.log it stops working after if (!this.$v.$invalid) which means that I'm not using Vuelidate correctly but in the validations when I try to use requiredIf I get an error
Error in created hook: "TypeError: Cannot read property 'modalTitle' of undefined"
TypeError: Cannot read property 'modalTitle' of undefined
this.modelTitle() is a computed property, I also tried doing required: requiredIf(this.mode === 1) but I get the same errors.
How can I fix it so that when creating the required fields include the password and password_confimation but when editing don't require them?
