悬停嵌套的 vue 组件

Question

我有一个嵌套和重复使用的 vue 组件。我正在尝试使用 v-show 在其外部父级悬停时显示组件的一部分（图标）。为了实现这一点，我将父索引和子索引作为道具传递，但是当子元素悬停时，我的父元素为 v-show 返回 true。我该怎么做才能解决这个问题？

<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; // problem here, this is returning True when a lesson is hovered

      }

      return false;
    },

}

Answer 1

如果我正确理解您的问题，标题应在其悬停时显示其图标，课程应在悬停时显示其图标，但不会触发标题。

setShowIndex(index, i) {
  if (i !== undefined) {
      this.showLessonIndex = i;
  } else {
      this.showCourseIndex = index;
  }
},

你只需要一个 else 吗？