Using Vue.js, is it possible to apply a class to a clicked element and then remove it when another element is clicked?

While developing an app using Vue.js, I have run into an issue. I am familiar with how to solve this problem using jQuery, but I am struggling to find a solution within my Vue app. Let me explain quickly - I have a list of items and I want to assign a specific color to the clicked element only, and remove it if a different element is clicked. I am looking to use e.target to achieve this goal. Any suggestions would be greatly appreciated!

new Vue({
  el: '#app',
  methods: {
    giveColor(event) {
        event.target.className += " green";
    }
  }
})
.green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="app">
  <li class="some" @click="giveColor" v-for="y in 10">
     menu clicked {{y}}
  </li>
</div>

Answer №1

If you're looking to achieve something similar, you can follow these steps:

new App({
  el: '#main',
  data: {
    selectedTab: 0,
  },
  methods: {
    changeTab(tabIndex) {
        this.selectedTab = tabIndex;
    }
  }
})
.active {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="main">
  <div class="tab" @click="changeTab(tabIndex)" :class="{active: selectedTab == tabIndex}" v-for="tabIndex in 5" :key="tabIndex">
     Tab {{tabIndex}}
  </div>
</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

My Angular JS http.get request is failing to reach the specified URL

While working with AngularJS to integrate RESTful web services into my website, I am encountering an issue where I am consistently receiving errors instead of successful responses. I have been stuck on this for the past three days and any assistance would ...

Trouble with sending input through Ajax in HTML form

I'm facing a dilemma that I can't solve. The issue arises from a page (index.php) that begins by opening a form, then includes another PHP page (indexsearch.php), and finally closes the form. The included page works with a script that displays d ...

Error encountered in clientside js file: Node.js indicates that 'require' is not defined

In my JavaScript file, I have important data that needs to be saved into a Mongoose schema and then inserted into a MongoDB table. The schema is stored in a separate directory, so I attempted to import it by adding the following line at the beginning of th ...

Please indicate the maximum number of digits allowed after the decimal point in the input

My input form uses a comma as the decimal separator: HTML: <form id="myform"> <label for="field">Required, decimal number:</label> <input class="left" id="field" name="field"> <br/> <input type="submit" va ...

Attempting to display numerous react components on various divs instead of just one ID

Currently, I am facing a challenge in creating multiple react comment boxes. The package I am using is based on #id instead of class, which resulted in only rendering one box instead of all. To resolve this issue, I attempted to switch from GetelemntbyID t ...

The error prop in Material UI DatePicker does not function properly when combined with yup and react-hook-form

Currently, I am working on enhancing a registration form using tools such as yup, react-hook-form, and Material UI DatePicker/TextField. My goal is to include a date of birth field that validates whether the user is over 18 years old. Although the error me ...

Unfortunately, the header and footer are not lining up correctly with the main body on our mobile site

I've been tasked with creating a fully responsive website, but I'm encountering difficulties with the mobile design. Specifically, when I switch to mobile dimensions like an iPhone 12, the header and footer don't line up properly with the ma ...

Ascending order cannot be achieved with OrderBy, but descending order can be successfully implemented

I am currently developing a Vue Webapp and facing an issue with sorting data in ascending or descending order. I have written the necessary code for this functionality to work smoothly. template <div class="dropdown-menu dropdown-menu-right" aria-labe ...

Having trouble sending the information to Parse.com using the website

I am a beginner with the Parse database and I am currently working on implementing a code that allows users to sign up, with their information stored in the Parse database. However, I am encountering an issue where the values are not uploading as expected. ...

Assign a value to a locally scoped variable within an iteration in Angular 2

Within my Angular code, I have the following HTML snippet: <span *ngIf="ControllerType?.AttributeID =='Controller Type'"> <select multiple name="ControllerType.Default" [(ngModel)]="Contro ...

Guide to changing the class of a particular child element when the parent element is clicked with vanilla JavaScript

Upon clicking the parent button, a class within its child element will toggle to show or hide. If the child element is selected, a loading animation will appear for a brief moment before reverting back to its original hidden state. I attempted to achieve ...

Quasar Table fails to update (version 1)

The Quasar Table I am using has its data property connected to a Vuex state, which is an array of objects. However, when the state of an object (a row in the table) changes, this change is not reflected in the table itself. Even though the QTable Data prop ...

Does ng-include fetch the included HTML files individually or merge them into a single HTML file before serving?

Is there a performance impact when using the ng-include Angular directive, in terms of having included HTML files downloaded as separate entities to the user's browsers? I am utilizing a CDN like AWS CloudFront instead of a node server to serve the H ...

Schema for Monogo Database

My goal was to have a property that could give me the timestamp of when a specific task was created. I decided to add a timestamp property and set it to true, but now my code won't compile. The code is functioning perfectly fine without the timestamp ...

Using Conditional Rendering and ReactCSSTransitionGroup for Dynamic Animations

I have developed a small application that displays different components based on a Redux state. I am trying to add a "fade" animation when one of the components renders, but unfortunately, it is not working as expected. Here is my current setup: content.j ...

Why won't the button's color change when I try clicking on it?

I am currently learning vue and facing some challenges. The code I have is supposed to change the button color when clicked, but it's not working as expected. Any advice on how to fix this issue would be greatly appreciated. Thank you! let app = ...

Leveraging the power of jQuery Ajax in conjunction with node.js and express for email validation functionality

Hey there! I have a contact form on my website that uses ajax for validation and email sending. The issue is that the validation file is set up for PHP, but I'm trying to make it work with my NodeJS app. Unfortunately, when I tried modifying the ajax ...

Is it possible to bring in a `devDependency` into your code?

The Mobx DevTool's README instructs users to install it as a dev dependency, and then import it into their code. This approach raises concerns for me because devDependencies are typically reserved for tools used in the build process or managing end co ...

Disable default behavior in a SharePoint 2010 List new form with jQuery if conditions are not met

In the SharePoint 2010 List new form, there are 10 checkboxes available. I specifically need to choose exactly 3 of them and not less than that. Even though I implemented jquery for this purpose, it seems that the form does not stop submitting when the con ...

Sending Django Variable With Javascript

As a newcomer to Javascript, I am grappling with retrieving the value of a variable from my HTML form. My current code seems to be somewhat functional - I added an alert to test the logic and found that the else statement is working fine. However, I'm ...