I am facing an issue with a nested and reused vue component. I am attempting to use v-show to display a part of the component (icons) when its outer parent is hovered. In order to achieve this, I am passing the parent and child index as props. However, I am encountering a problem where the parent element is returning true for v-show when the child element is hovered. What can I do to fix this?
<div v-for="course, index in courses">
<!-- hover me -->
<div class="header" @mouseover="setShowIndex(index)" @mouseout="resetShowIndex">
<!-- part of this component should v-show when its parent is hovered -->
<MyCustomComponent
type="course"
:showCourseIndex="showCourseIndex"
/>
<!-- items.lessons can be hovered too, but the parent should not v-show when this is hovered -->
<div
v-for="lesson, i in course.lessons"
@mouseover="setShowIndex(index, i)"
@mouseout="resetShowIndex"
>
<MyCustomComponent
type="lesson"
:showCourseIndex="showCourseIndex"
:showLessonIndex="showLessonIndex"
/>
</div>
</div>
/**
* update indexes to pass as props
*/
setShowIndex(index, i) {
if (i !== undefined) {
this.showLessonIndex = i;
}
this.showCourseIndex = index;
},
resetShowIndex() {
this.showCourseIndex = null;
this.showLessonIndex = null;
}
// MyCustomComponent
<div>
<!-- ... more -->
<div v-show="shouldShowIndex">
<p>Show me</p>
</div>
<!-- ... more -->
</div>
computed: {
shouldShowIndex() {
if ( this.type == 'lesson'
&& this.showModuleIndex == this.moduleIndex
&& this.showLessonIndex == this.lessonIndex ) {
return true;
} else if (this.type == 'course' && this.showModuleIndex == this.moduleIndex ) {
return true; // issue here, returning True when a lesson is hovered
}
return false;
},
}