Elevate sublevel vue component

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;
        },

    }

    

Answer №1

It seems like your issue involves the header displaying its icon when hovered and the lessons displaying their icon when hovered, without triggering the header.

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

Perhaps you simply need to add an 'else' statement there?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Nested tables in Datatables retrieving child table rows based on parent table

I have been struggling for the past three days to get my nested Datatables working properly. I have a parent table called MAINtable and a child table called adjlinesTable. The issue I am facing is that all lines from the adjlinesTable are being drawn to ...

Experience running two functions simultaneously in jQuery simulation

Presented here are two functions that I am working with: loadTop(); loadBottom(); One of these functions is responsible for loading the top portion of a page while the other takes care of loading the bottom. The loadTop function involves asynchronous o ...

Guide on utilizing jQuery/AJAX data with PassportJS

When I submit a login request using the form fields action="/login", method="post", everything works smoothly. This is similar to the code examples found either here or here. However, when I attempt to send the same information using jquery/ajax, passport ...

What steps do I need to take in order to integrate vue-i18n and vue2 with Storybook's mdx type stories?

After struggling with this issue for a while, I decided to share my solution here in case others are facing the same problem. The setup includes: - "vue": "^2.6.12", - @storybook/vue": "^6.4.19", - "vue-i18n": ...

Adding a data attribute to a group of elements derived from an array

Looking to enhance the functionality of a slick slider by creating a custom navigation with buttons that will work alongside the original navigation dots. To achieve this, I need to extract the 'data-slick-index' attribute from every fourth slid ...

How to adjust the timezone settings in PHPMyAdmin on a shared server platform

I'm having trouble changing my timezone to India on my shared server database. I've tried everything but can't seem to get it to work. My website is built using PHP Codeigniter The contact us page on my site saves all inquiry details to my ...

The function correctly identifies the image source without error

I possess a pair of images: <img id="img1" src="l1.jpg" usemap="#lb" height="400" border="0" width="300"> <img src="images.jpg" id="img2"> Next up is some JavaScript: function validateImages () { if (document.getElementById('img2&ap ...

Guidelines for leveraging AngularJS Decorators to deactivate a button within an Html document

Currently, I am utilizing the blur admin theme and exploring the possibility of using decorators to hide a button without directly modifying the HTML. Despite my efforts, I have been unable to successfully conceal the button. Can someone provide guidance o ...

JavaScript Firebase: Service worker malfunctioning during navigation

I'm currently developing a website that relies on firebase messaging. To make this happen, a specialized service worker for firebase has been integrated into the site. This website functions as a webchat platform where messages are synchronized and s ...

Simple JavaScript validation for inputting names

Hey there, I'm a beginner in javascript and I am struggling with a simple input validation using else if statements. Every time I run the code, it goes directly to the else condition. Can someone please assist me? <!DOCTYPE html> <html lang=& ...

Ways to merge values across multiple arrays

There is a method to retrieve all unique properties from an array, demonstrated by the following code: var people = [{ "name": "John", "age": 30 }, { "name": "Anna", "job": true }, { "name": "Peter", "age": 35 }]; var result = []; people. ...

Deleting an object with javascript in django: A step-by-step guide

Is there a way to use JavaScript to create a confirmation window before deleting an item? <div class="card-footer"> <a href="{% url 'course_delete' student.slug %}"><button>Delete</button>&l ...

An Array of objects is considered NULL if it does not contain any values before being iterated through

Working with Files in TypeScript (Angular 8) has led me to Encode the files in Base64 using the code below: private async convertToBase64(evidences: Array<EvidenceToDisplay>): Promise<Array<EvidenceToDownload>> { const results: Arr ...

Issue with data entry: unable to enter the letter 'S' in search field

This bug has been a real challenge for me. It's strange, but I'm unable to type the letter "S" into the search input field. Oddly enough, the keyboard seems to be functioning properly. Please find the sandbox below for reference: https://codes ...

Instructions for receiving user input and displaying it on the screen, as well as allowing others with access to the URL to view the shared input provided by the original user

<h1>Lalan</h1> <input type="text" name="text" id="text" maxlength="12"> <label for="text"> Please enter your name here</label> <br><input type="submit" value ...

Tips for adjusting the position of nodes that are overlapping in React Flow

Whenever node1 is moved over node2 in react-flow, they end up overlapping. I am looking to shift node2 towards the right to avoid this overlap. The desired outcome is for node2 to be shifted to the right side. ...

Executing directives in a sequential manner

I am facing a challenge with my HTML view that is filled with multiple Angular directives, each triggering numerous HTTP requests. This has resulted in high CPU usage due to the heavy load. Our proposed solution is to load one directive at a time, allowing ...

Rotation Causes Vertices to Deviate from Expected Axis Movement

While moving the vertices of a shape on mouse move works well, applying a rotation to the shape causes the vertices to move along the wrong axis. If you'd like to see the issue in action, check out this codesandbox.io link: https://codesandbox.io/emb ...

Running two servers at the same time using nodemon might seem complex, but it

Is it possible to run two servers (www.js and apiServer.js) simultaneously using nodemon? I have set the value for the "start" key in package.json as https://i.stack.imgur.com/r8M7p.jpg After running nodemon in the command prompt with the current working ...

What is the best method to display the content in the second response for ajax's authorization and dealing with cors?

I have successfully implemented basic authorization and enabled CORS on my VPS. Check the CORS preflight request using cURL: HTTP/1.1 200 OK Date: Sat, 15 Sep 2018 08:07:37 GMT Server: Apache/2.4.6 (CentOS) Access-Control-Allow-Origin: http://127.0.0 ...