Can someone please assist me with this error message? It says "app.js:108639 [Vue warn]: Cannot set reactive property on undefined, null, or primitive value."
I encountered this error while working with a Bootstrap Vue modal. Here is a snippet of my code:
Firstly, here is the template snippet:
<div class="card-tools">
<b-button class="btn btn-success" v-b-modal.modal-prevent-closing>
Add Staff
<i class="fas fa-user-plus fa-fw"></i>
</b-button>
<b-modal
id="modal-prevent-closing"
ref="modal"
title="Enter Staff Info"
@show="resetModal"
@hidden="resetModal"
@ok="handleOk"
>
<form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group
label="Name"
label-for="name-input"
invalid-feedback="Name is required"
:state="nameState"
>
<b-form-input
id="name-input"
v-model="info.name"
:state="nameState"
required
></b-form-input>
</b-form-group>
<b-form-group
label="Email"
label-for="email-input"
invalid-feedback="Email is required"
:state="emailState"
>
<b-form-input
id="email-input"
v-model="info.email"
:state="emailState"
required
></b-form-input>
</b-form-group>
<b-form-group
label="Phone"
label-for="phone-input"
invalid-feedback="Phone is required"
:state="phoneState"
>
<b-form-input
id="phone-input"
v-model="info.phone"
:state="phoneState"
required
></b-form-input>
</b-form-group>
<b-form-group
label="Job Title"
label-for="job_title-input"
invalid-feedback="Job title is required"
:state="phoneState"
>
<b-form-input
id="phone-input"
v-model="info.job_title"
:state="job_titleState"
required
></b-form-input>
</b-form-group>
</form>
</div>
Next, let's look at the script section:
import { BButton, BModal, VBModal } from "bootstrap-vue";
export default {
components: {
BButton,
BModal
},
directives: {
'b-modal': VBModal
},
data() {
return {
staffs: {},
nameState: null,
emailState: null,
phoneState: null,
job_titleState: null,
info: {
name: '',
email: '',
phone: '',
job_title: ''
},
showModal: false
}
},
methods: {
getStaffs() {
axios.get("api/user").then(({data }) => (this.staffs = data));
},
checkFormValidity() {
const valid = this.$refs.form.checkValidity()
this.nameState = valid
return valid
},
resetModal() {
this.info = ''
},
handleOk(bvModalEvt) {
// Prevent modal from closing
bvModalEvt.preventDefault()
// Trigger submit handler
this.handleSubmit()
},
handleSubmit() {
// Exit when the form isn't valid
if (!this.checkFormValidity()) {
console.log(this.info)
}
// Hide the modal manually
this.$nextTick(() => {
this.$bvModal.hide('modal-prevent-closing')
})
}
},
created() {
this.getStaffs();
},
mounted() {
console.log('Component mounted.')
}
};
I would appreciate any feedback and suggestions to ensure my code is correct before proceeding with validation. Thank you in advance.