I am currently working on updating an 'exercise' prop that is being sent to a 'workout' component in Vue. Within the child component, I have set up a function to emit and increment the current set you are on. The function is successfully triggering in the parent component (I can see console.logs()), however, the child component is not re-rendering.
Parent Component:
<ExerciseListItem
v-for="(exercise) in exercises"
v-on:completeSet="completeSet"
v-on:selectExercise="selectExercise"
v-bind:exercise.sync="exercise"
v-bind:isActiveExercise="exercise.slug === activeExerciseSlug"
v-bind:key="exercise.slug"
/>
Methods Used:
methods: {
completeSet: function(slug) {
console.log("complete-set", slug);
const exercise = this.getExerciseBySlug(slug);
exercise.completedSets++;
if (exercise.completedSets === exercise.totalSets) {
this.completeExercise(slug);
}
},
completeExercise: function(slug) {
this.getExerciseBySlug(slug).isComplete = true;
console.log("COMPLETE-exercise", slug);
},
getExerciseBySlug: function(slug) {
return this.exercises.find(exercise => exercise.slug === slug);
},
selectExercise: function(selectedSlug) {
this.activeExerciseSlug = selectedSlug;
}
},
Child Template:
<li
v-bind:class="{ 'white-box': true, complete: exercise.isComplete }"
v-on:click="exercise.totalSets > 1 ? $emit('selectExercise', exercise.slug) : $emit('completeSet', exercise.slug)"
>
You can find the project on Github here
Also, check out the live demo of the project
Your assistance would be greatly appreciated 😊