Switching icons in a Vue framework when hovering over multiple elements

I'm looking to update the icon of a specific element on hover using Vue instead of JS/jQuery. Currently, my code is changing the icons of all four elements when hovered over:

HTML:

<div class="col-md-3">
<div class="welcome-latest">
    <div class="hover-icon animated" v-bind:class="{ latestActive : isActive }">
        <i class="fa fa-play" aria-hidden="true"></i>
    </div>
    <div class="welcome-latest-part"
            v-on:mouseover="latestActive"
            v-on:mouseleave="latestInActive">
        <a href="#">
            <div class="latest-icon">
                <i class="fa fa-play-circle-o" aria-hidden="true"></i>
            </div>
            <hr>
            <div class="latest-title">
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
            </div>
        </a>
    </div>
</div>
</div>

Vue:

new Vue({
    el: '#app',

    data : {
        isActive : true
    },

    methods : {
        latestActive (part) {
            this.isActive = false;
        },
        latestInActive(part) {
            this.isActive = true;
        }
    }
});

However, I want to only change the icon of the hovered element. Any suggestions on how to achieve this? Thank you in advance.

This is my fiddle!

https://jsfiddle.net/mbmohib/py894zj8/2/

javascriptvue.js

Answer №1

It seems like the main issue lies in using a global state to assign classes to all elements.

v-bind:class="{ latestActive : isActive }"

A potential solution would involve converting your columns into individual components, each with its own state.

Vue.component("component",{
  props:["text"],
  template:"#component",
  data(){
    return {
        isActive:true
    }
  }
})

<template id="component">
  <div class="welcome-latest">
    <div class="hover-icon animated" :class="{ latestActive : isActive }">
      <i class="fa fa-play" aria-hidden="true"></i>
    </div>
    <div class="welcome-latest-part"
         v-on:mouseover="isActive=true"
         v-on:mouseleave="isActive=false">
      <a href="#">
        <div class="latest-icon">

        </div>
        <hr>
        <div class="latest-title">
          <h2>{{text}}</h2>
        </div>
      </a>
    </div>
  </div>
</template>

Then, update #app as follows:

<div class="col-md-3">
    <component text="Lorem ipsum dolor sit amet, consectetur adipisicing elit"></component>
</div>

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

Using an array in JavaScript to play a game of Rock, Paper, Scissors

Currently struggling with writing code for a Rock, Paper, Scissors game using javascript. Even though it's a common topic, I'm relatively new to this and couldn't find any resources that align with my use of arrays. I tried using an array to ...

javascripthtmlarrays

A guide on how to efficiently retrieve a string within a function in a native module in a React Native

I'm currently tackling a function related to the native elements of iOS that is coded in Objective-C, My goal is to create a method that will output a string in Objective-C, However, I've hit a roadblock while trying to implement this method: T ...

javascriptandroidiosobjective-creact-native

Setting session expiration for an HTML page in MVC with JavaScript - A step-by-step guide

I'm working on a HTML page within an MVC framework that includes a button click function. I'm trying to figure out how to redirect the user to the login page if the page remains idle for 30 minutes. I've attempted using the code snippet belo ...

javascripthtmlasp.net-mvc

What is the best way to restrict the selection of specific days of the week on an HTML form date input using a combination of JavaScript, React, and HTML?

I need help customizing my Forms Date Input to only allow selection of Thursdays, Fridays, and Saturdays. I've searched for a solution but haven't been successful so far. Is there any JavaScript or HTML code that can help me achieve this? Below ...

javascripthtmlreactjsdatecalendar

The functionality of Javascript is being compromised when utilizing ng-repeat

Just recently diving into the world of AngularJs while developing a website. I've successfully retrieved data from Rest services on a page, and used ng-repeat to display it. The issue arises when I have a regular javascript element on the page that i ...

javascriptangularjs

Transforming precise military time using Angular and Javascript filtering

There are a few times where I find myself liking 01:45 //and 15:00 I believe this time format is HH:MM in military time? While I have come across some advanced functions that can parse sentences and even include seconds like HH:MM:SS, I am looking for a ...

javascriptangularjsdate

What is the best way to retrieve a collection of DOM elements in JSX?

I'm in need of rendering certain components only if a specific condition is met. To achieve this, I have written the following inside the render() method: return ( <div className={classes.root}> {registrationScreen && ( * ...

javascriptreactjsmaterial-ui

What could be causing the issue with my Mongoose One-To-Many Relationships not linking correctly?

Can anyone shed light on why the connection between "users" and "posts" (where users can have multiple posts) is failing to work properly? Despite setting up my mongoose associations correctly, when a new post is made, it doesn't get assigned to a use ...

javascriptnode.jsmongooseone-to-manymean-stack

Positioning a div to the right of another div within a container (box)

I'm currently trying to line up two divs alongside each other within a box. Using angularJS, I am dynamically generating input boxes and looking to include an image for the delete option next to each input box. Despite using "display: inline-block", I ...

javascriptjqueryhtmlcssangularjs

How can one retrieve elements from a dictionary array and create a new array?

I'm struggling with how to access elements from a dictionary within an array and create another dictionary in ReactJs. The data structure is as follows: [{name: "dad", data: 10}, {name: "mom", data: 20}, {name: "dad", data: 40}, {name: "mom", da ...

javascriptreactjs

Invoke the parent's trigger method from a child component nested within a router in Quasar Framework (Vue)

I've configured my nested routes in the router using the Quasar framework (vue 3) like this: const routes = [ { path: "/", component: () => import("layouts/myLayout.vue"), children: [ { path: "&q ...

vue.jsvuexvue-routervuejs3vuex4

The TypeScript declarations for the scss module are malfunctioning

Just recently, I set up a React project using rollup. Below is the configuration file for my rollup setup: rollup.config.js import serve from "rollup-plugin-serve"; import livereload from "rollup-plugin-livereload"; import babel from &q ...

javascriptreactjstypescriptsasstyped

Uploading files in React.js using Yii2 API

I am working with react.js (version 15) and I need to upload files using yii2 api. Here is my code: My component in react: import React, { Component } from 'react'; import Header from './Heaader'; /* global $ */ class New ...

javascriptphpajaxreactjsyii2-advanced-app

Shuffling decks of cards among players at a table using JavaScript

Seems like such a simple task, but I can't seem to get it right. The idea is to have an array of 8 other arrays, each containing sets of cards (although in this case, they just have random numbers). Depending on whether passDirection is set to -1 or 1 ...

javascriptarrays

Arrange the array depending on the existence of properties in the objects

Is there a way to efficiently organize an array like the following in cases where certain fields are missing? For instance, consider the current array: const users = [ { id: 1, firstname: 'Jerry' }, { id: 2, firstname: & ...

javascriptarrayssortingobjectecmascript-6

Create multiple instances of Object3D in THREE.js with various positions and rotations

Can I draw Object3D multiple times with different locations/rotations without cloning it? I want to avoid duplicating the object and instead just reference its geometries and materials. The Object3D in question is a Collada model (dae.scene) in my code. v ...

javascriptthree.jswebgl

What changes can I make to this jquery code to utilize a background image instead of a background color?

Can someone help me modify this snippet to set a background-image instead of changing the background color? <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#button_layer").hide(); $("#im ...

javascriptjqueryfunction

Dividing HTML and JavaScript using Vue

Is there a way to separate HTML from data/methods in VueJS to avoid having one long file with both? I tried moving the contents of my <script> section into a new file called "methods.js" and importing it using: <script src="methods.js"> Note ...

javascripthtmlvue.js

Validation of form fields appears to be disregarded

I seem to have overlooked a simple issue with this form field validation method. It has worked effectively for me in the past, but now, despite checking all file paths, every time I submit the form, it sends an email regardless of the field content. You c ...

javascripthtmlforms

"VUEJS seems to be incompatible with Wowjs and Animate.css, as they are not

I've been attempting to add some animation using either wowjs or animate.css, but it doesn't seem to be working for me. Here are the steps I have taken: First: npm install wowjs In my main.js file: import 'animate.css'; In the pages ...

vue.jsvuejs2twitter-bootstrap-3animate.csswow.js