I am currently working on a project that incorporates Vue components and utilizes the collection design pattern to manipulate lists. Within the collection, there is a function called arr.add that successfully adds a new object to the list when a button is clicked. However, I have encountered an issue where this function works correctly on the initial call but throws an error stating it is not a function when called for a second time. This problem seems to persist across all of my function calls.
Interestingly, if I manually input the data into the list without using the collection method, everything functions as expected. But as soon as I attempt to use the collection for a second time, I receive the following error: Uncaught TypeError: this.exerciseList.add is not a function
Below is the code snippet of the collection model:
function ExerciseCollection(arr = []){
// Various manipulation functions within the collection
arr.add = function (exercise, date){
// Functionality to add exercise with optional date
}
arr.delete = function (exercise){
// Functionality to delete exercise
}
arr.deleteSet = function (exercise, set){
// Functionality to delete specific set within exercise
}
arr.addSet = function (exercise){
// Functionality to add set to exercise
}
return arr;
}
The issue seems to arise at the following section where these functions are being invoked:
const app = Vue.createApp({
// All data for the app, must return an object
data() {
return {
exerciseList: new ExerciseCollection().add({...}),
dayList: new DayExerciseCollection(),
reviewList: new ReviewCollection(),
daysReview:{},
selectedEditExercise: {},
currentDay: ''
};
},
methods {
// Method to add exercise and update day list
addExercise(exercise, date){
this.exerciseList.add(exercise, date);
this.dayList.add(exercise, date);
},
...(rest of the file)