Is there a way to nest a child within a parent in Vue.js without using a separate component?

As I navigate through Vue, I encounter a unique challenge that I can't seem to resolve. Below is the HTML code snippet and JSFiddle links:

    <div class="box align" id="app" onmouseover="fuchsia(id)" onmouseout='notFuchsia(id)'>
      <div class="line align">
        <div class="y-line align">
            <p>get ur pointer yellow line</p>
        </div>
      </div>
    </div> 
<!--JS and CSS in JSFiddle links. Please look at -->

Case 1 (Pure JS + HTML + CSS): https://jsfiddle.net/mcezgsa7/32/

Case 2 (Vue.js + HTML + CSS): https://jsfiddle.net/pa2xmyju/12/

Even though I want my code to function like Case 1, I am working with Vue.js. Thus, it seems like there may be an issue that needs addressing.

javascripthtmlcssvue.jsvuejs2

Answer №1

After some revisions to the original code, I made a few tweaks. I removed certain methods, included a new property called hover in the data object, and introduced a css class named active. This class is applied to the element whenever the mouse hovers over it.

https://jsfiddle.net/dhj0p2tq/

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

Utilize the Bootstrap column push-pull feature on the mobile version of

https://i.stack.imgur.com/yTBIt.png When viewing the desktop version, div A is displayed at the top of the page. However, I would like to move it to the bottom when viewing on a mobile device (col-xs). I have attempted to solve this issue myself without s ...

javascripthtmltwitter-bootstrapcss

Encountered an unexpected error in Vue: "Maximum call stack size exceeded callWithAsyncErrorHandling - Uncaught Range

<button onClick="test">Test</button> Issue encountered in Vue 3 that caused significant troubleshooting: Error message: Uncaught RangeError: Maximum call stack size exceeded callWithAsyncErrorHandling https://i.sstatic.net/sW2TU.pn ...

vue.jsvuejs3

Shut down all bootstrap modals

Is there a more efficient way to close all modals in my project without having to specify the ID of each one individually? Currently, I am using the following code: closeModals() { $('#new-user').modal('hide'); $('#new-pro ...

javascriptbootstrap-4modal-dialog

Tips for sending a post request using Angular 4

I'm currently facing an issue while attempting to execute a post request using Angular 4 to transmit lat and lng parameters: let data = {lat: this.newLat, lng: this.newLng}; this.http.post(url, data) .map(response => response.json()) .subscri ...

javascriptphpangulartypescriptpost

When using html-pdf-chrome to print to an A4 PDF, there appears to be a significant space below the A

In my Laravel project, I am currently utilizing the westy92 / html-pdf-chrome library to convert HTML to PDF. The front-end of my project is based on React. I have defined a series of divs to act as A4 pages: <div id="pdf" className="pri ...

phphtmlcssreactjspdf

Enhancing Data Tables with Jquery: Implementing Column Filtering for Multiple Elements within Table Cells

I am looking to utilize jQuery datatables for filtering a column that may contain multiple values within a single td. To achieve this, I referenced the example provided in the datatables documentation. In the image below, my goal is to filter the office ...

javascriptjquerydatatables

Move and place, editing tools

Is it possible to create a drag-and-drop editor similar to the one found in the form editor on wufoo.com? ...

phpjavascriptajax

How to use JavaScript to loop through and parse JSON data from Google Maps API

Hey there, I'm a beginner in javascript and I need some help. I am trying to figure out the best way to access a json object called "js" so that I can display different content for each marker on a map. Right now, all my markers are showing the same k ...

javascriptjsongoogle-mapsfor-loop

The CSS background shadow on one div behaves differently compared to the neighboring div

Currently, I am facing an issue where I have two divs positioned next to each other in a line. http://jsfiddle.net/A5Jc7/60/ The HTML structure is as follows: <div> <div class="box1"></div> <div class="box2"></div> ...

htmlcss

Jquery Mobile: Navigating back to the first page after calling changePage

In the process of developing a mobile app with phonegap/cordova and jquery mobile, I encountered an issue where the user is supposed to land on a specific page from a status bar notification. However, the app initially displays the default page briefly bef ...

javascriptjquerycordovajquery-mobile

Utilizing the Power of Magicline in Conjunction with Flexslider

Currently, I am implementing Flexslider for a slideshow on my website and I am attempting to integrate Magicline with it. The functionality is working well, but I have encountered an issue where the magicline does not move when clicking on the navigation a ...

javascriptjquerycarouselflexslidermagicline

Attempting to create a function that removes the first and last characters from a string, however encountering issues with the code in TypeScript

Currently, I am delving into the world of TypeScript and facing a challenge. The task at hand involves creating a function that returns a string without its first and last character. Can anyone offer assistance with this problem? Below is the code along wi ...

javascripttypescript

`Need to clean parameters for safe use in JavaScript code?`

I am working with the php code below: <?php $redirect_lp = $_GET['lp']; ?> <script> setTimeout(function(){ window.location.href = "<?php echo $redirect_lp; ?>"; }, 10) </script> How can I properly sanitiz ...

javascriptphpxss

Error in jQuery submenu positioning issue

I am attempting to design a menu that opens when the parent element is clicked and closes when the mouse leaves the previously opened one. It should operate from left to right. Here is an example: <ul class="menuFirst"> <li><im ...

javascriptjqueryhtmlcss

What is the best way to showcase an image that is being retrieved from PHP using ajax?

I need to show the image that is being received from PHP via ajax. I can display the name <span id="pic_name">Pic name here</span> but how can I display the image as <img src="images/pic/picname" /> //alert(a); $.ajax({ ...

jqueryhtmlajax

What are the steps to create a DIV table after submitting a form?

I'm having trouble creating a header row for a DIV table using JavaScript (without jQuery). Instead of getting the expected output, I'm getting a row with the array items as headings separated by commas. https://i.sstatic.net/8O5QR.png var ma ...

javascripthtmlcss

Django Template Syntax error: Unable to pass the remaining part

I recently started working on a Django project and I'm still learning the ins and outs of the Django framework. Upon running the application with python3 manage.py runserver, an error has popped up showing django.template.exceptions.TemplateSyntaxErro ...

pythonhtmldjango

What causes HTML validator errors in all head meta-tags?

After running my HTML through a validator, I was shocked to discover around 80 errors even though the site appeared to be functioning properly. Here is an excerpt of the code: <!DOCTYPE html> <html lang="da-DK"> <head> <meta charset=" ...

htmlvalidation

There is a JSON issue present, with half of the variables being undefined

Having an issue with my JSON as it throws me an undefined error. What's puzzling is that it recognizes my first variable without any problem. Below are the codes for better understanding: JSON {"Comics":[ {"comic" : { "src":"Pictures/Comic ...

javascriptarraysjsonajax

The only functional button in the table is the one located on the top row

My MVC Application is encountering an issue with only the first item in the table working perfectly, while the rest are not calling the method. Despite my extensive research, I have been unable to resolve this issue. Below is the code on my view. Can someo ...

htmlasp.net-mvcc#-3.0