Removing classes from multiple elements on hover and click in Vue 2

Can Vue be used to remove a class from an element? I am looking to remove the class when hovering over the element, and then add it back once the mouse is no longer on the text.

Additionally, I want the class to be removed when the element is clicked.

Here is an example of what I am attempting:

<span class="text-muted">All | </span>
<span class="text-muted">Visible | </span>
<span class="text-muted">Hidden</span>

Upon page load, the first span should not have the class until another element is clicked.

javascriptvue.jsvuejs2

Answer №1

If you want to remove the class when clicking on the element, you can achieve it like this: 

<span class="text-muted" @click="$event.target.classList.remove('whatever-class')">All | </span>

To remove the class on hover instead, simply change the event name to mouseover:

<span class="text-muted" @mouseover="$event.target.classList.remove('whatever-class')">All | </span>

To reapply the class, use the mouseout event:

<span class="text-muted" @mouseout="$event.target.classList.add('whatever-class')">All | </span>

I hope this explanation is helpful.

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

Encountering undefined data when trying to access returned JSON data through jQuery Ajax

Utilizing the MVC approach, within my javascript code, I am encountering a discrepancy. Upon using console.log(data.msg) in the success function, the desired result is achieved. However, when attempting to employ $('#res').text("".data.msg), an ...

javascriptphpjqueryajaxjson

transmitting information from the state to actions in Vuex

I am trying to pass latitude and longitude coordinates from the state to an action in order to retrieve the city name based on the coordinates. However, I have noticed that using state.lat and state.lng directly in the axios.get URL does not work. What a ...

vue.jsvuex

Is there a way to make this AngularJS service wait until it has a value before returning it?

Multiple controllers call a service that loads data into an object named categories: .service('DataService', ['$http', '$q', function($http, $q) { var categories = {}; // Public API. return({ setCategory ...

javascriptangularjs

What is the correct way to import the THREE.js library into your project?

I recently added the three library to my project via npm. Within the node_modules directory, there is a folder named three. However, when I tried to import it using: import * as THREE from 'three'; I encountered the following error: ReferenceEr ...

javascriptnode.jsnpmthree.jsnode-modules

Something seems to be amiss with the Vue.js eslint configuration. Can you help

I am just starting out with vueJs. I attempted to use this basic code in my vue project to update the data of a component: <template> <div> <h1> {{ message }} <h2> Hello {{ firstname }} {{ lastna ...

vue.jseslint

Trigger the jQuery function based on the ID modification executed by jQuery

Is it possible to change the id of an HTML element using this function? $("#test").attr('id', 'test2'); Here is an example of the code: $("#test").click(function() { $("#test").attr('id', 'test2'); alert(& ...

javascriptjquery

Tips for preventing the inheritance of .css styles in React

I'm facing an issue with my react application. The App.js fragment is displayed below: import ServiceManual from './components/pages/ServiceManual' import './App.css'; const App = () => { return ( <> ...

javascripthtmlcssreactjs

Unable to authenticate client response using passportjs jwt

Looking to set up login using passport-JWT. able to successfully sign up and log in, with a token generated upon logging in and sent back to the client application. However, after the authentication request reaches the app post-login, it seems like nothin ...

javascriptnode.jsexpressjwtpassport.js

Is there a PHP function that functions similarly to JavaScript's "array.every()" method?

As I work on migrating JavaScript code to PHP, I am facing the challenge of finding a replacement for the array.every() function in PHP. I have come across the each() function in PHP, but it doesn't quite meet my requirements. ...

javascriptphparrays

Understanding the res.render method in JavaScript can be a bit tricky at first

In my spare time, I have been immersing myself in coding lessons and have encountered some puzzling aspects of the code: Firstly, there is a confusion surrounding the action attribute in HTML Secondly, this particular piece of code is causing me some b ...

javascripthtmlexpressresponsebody-parser

Exploring vuelidate: demonstrating personalized validation messages alongside pre-built validators

I'm currently utilizing the vuelidate library to validate my forms. I've been attempting to use the built-in validators along with a custom message, as shown below. However, I have encountered issues with it not functioning properly. For referenc ...

javascriptvue.jsvuelidate

What is the process of generating enum values using ES6 in Node.js?

Can JavaScript support enumerations with assigned integer values, similar to how other programming languages handle it? In C#, for instance, I can define an enum as follows: enum WeekDays { Monday = 0, Tuesday =1, Wednesday = 2, Thursday ...

javascriptnode.js

Exploring Zustand through Laravel validation errorsUnderstanding Zustand can be

I'm currently working on incorporating Zustand into my NextJS application. I have set up a Laravel endpoint for user login functionality. When there are validation errors, the endpoint sends back JSON in the following format: { "message" ...

javascriptreactjsnext.js

Convert object to JSON format using AJAX request to a PHP file

Despite receiving a 200 green response, my data is still not getting written to the json file and it remains blank. The JavaScript: $(function() { $('form#saveTemp').submit(function() { let savdAta = JSON.stringify($('form#save ...

javascriptphpjsonajax

The ng-click event is not triggering the Controller Function as expected

This is the Code for My View <div ng-controller="signupCtrl"> <ul class="list-group" > <li class="list-group-item"> <div class="form-group"> <input type="text" ng-model="signupCtrl.firstName"> ...

javascriptjqueryangularjs

Guide on toggling the button by clicking on the icon to turn it on or off

Within my angular application, I have implemented font icons alongside a toggle switch. Initially, the switch is in the ON state. The specific functionality desired is for clicking on an icon to change its color from white to red (this has been achieved) ...

javascripthtmlangulartypescripttoggle

Update the class information using jQuery after performing an action and serialize the button's ID for AJAX requests

I'm facing an issue with two buttons on my page: <td> <button id="1" class="green-button">Publish</button> <button id="1" class="yellow-button">Delete</button> </td> The green-button and red-button have different ...

javascriptphpjqueryajax

Changing the order of a list in TypeScript according to a property called 'rank'

I am currently working on a function to rearrange a list based on their rank property. Let's consider the following example: (my object also contains other properties) var array=[ {id:1,rank:2}, {id:18,rank:1}, {id:53,rank:3}, {id:3,rank:5}, {id:19,r ...

javascriptlisttypescript

Calling Node Express request inside a GET route

I am currently utilizing nodejs as an intermediary layer between my public website and an internal server within our network. Through the use of express.js, I have created a basic REST api where the endpoint should trigger a request call to a webservice a ...

javascriptnode.jsexpress

Having trouble reaching external methods in Vue with Echarts OnClick Methods?

Hey there! I've been working on integrating Echarts into a Vue application, and I've encountered a bit of a roadblock. Specifically, I'm trying to capture the item clicked on one of the charts and then pass that data back to the parent compo ...

vue.jsapache-echarts