My dialog component has a student_list props and is triggered by a watcher. Essentially, when I increase the variable dialog_watcher++ in my main component, the dialog will open.
The data within the student_list props looks like this:
student_list = [
{id: 1, name: 'John'},
{id: 2, name: 'Jane'},
{id: 3, name: 'Jake'},
{id: 4, name: 'Finn'},
]
Within the Dialog component, in my watch:{} hook, there is a variable student_list_data where I assign the value of the student_list props.
watch: {
let temp = this.student_list;
this.student_list_data = temp;
}
Within the Dialog component, there is a button that allows me to remove an item from the student_list_data array.
_selectStudent(item) {
//remove the selected student from the array
const index = this.student_list_data.findIndex(obj => obj.id == item.id);
this.student_list_data.splice(index, 1);
//append the selected student to a new array
this.selected_student.push(item);
}
Upon inspecting in my vue devtools, I noticed that not only the student_list_data array was spliced, but also the student_list props were affected. I have checked thoroughly but could not find any function that modifies the student_list props directly.
Any suggestions on what might be causing this unexpected behavior?