Currently, I have a situation in my code where I am able to successfully delete an 'exercise' object from the state. However, the deletion does not reflect on the component itself. The parent component receives data from the state and passes the 'exercises' array to the child component for deletion.
Index passes the exercises as selectedRoutine to RoutinePanel
<v-row v-else justify="center">
<v-col cols="12" sm="9" md="7" class="text-center">
<RoutinePanel
:selected-day="selectedDay"
:selected-routine="selectedRoutine"
/>
</v-col>
</v-row>
Then RoutinePanel passe each exercise as a prop to HorizontalExercises
<div v-for="exercise in selectedRoutine" :key="exercise.name">
<HorizontalExercises :exercise="exercise" :selected-day="selectedDay" />
</div>
HorizontalExercises
export default {
props: {
exercise: {
type: Object,
default: () => {
return {
name: 'Exercise',
sets: 0,
reps: 0,
weight: 0,
id: 0,
}
},
},
selectedDay: {
type: String,
default: () => {
return ''
},
},
},
Within HorizontalExercises, I have a function that effectively removes the exercise from the state. However, I am facing difficulty in ensuring that it also disappears from the component prop and stops rendering. The exercise only disappears when I re-render the RoutinePanel component.
Here is a simplified version of how the state looks:
routines: [
{
day: 'monday',
exercises: [
{
name: 'bicycle',
duration: '5 min',
id: 0,
},
]
Below is the mutation being used:
deleteExercise(state, payload) {
const routineIndex = state.routines.findIndex(
(routine) => routine.day === payload.day
)
const exerciseIndex = state.routines[routineIndex].exercises.findIndex(
(exercise) => exercise.id === payload.id
)
state.routines[routineIndex].exercises.splice(exerciseIndex, 1)
},
I believe making everything reliant on the state and avoiding passing props might resolve this issue.
Apologies if this seems confusing, this is my first time asking a question.