Can't get className to work in VueJS function

I need help changing the classNames of elements with the "link" class. When I call a method via a click action, I can successfully get the length of the elements, but adding a class does not seem to work. Does anyone have any insights into this issue?

HTML

<div id="app">
  <ul>
    <li><a href="#" class="link" @click="myFunc">Link text 1</a></li>
    <li><a href="#" class="link" @click="myFunc">Link text 2</a></li>
    <li><a href="#" class="link" @click="myFunc">Link text 3</a></li>
  </ul>
</div>

JS

var app = new Vue({
el: '#app',
methods: {
  myFunc: function(event){

      // works
      var ElLength = document.getElementsByClassName('link').length;
      console.log('ElLength = ' + ElLength);

      // does not work
      document.getElementsByClassName('link').className += " hullaballoo";

    }
  }
});

JSFIDDLE

Answer №1

document.querySelector('.link') 

fetches an array-like object of HTML elements, and .classList is a property of each element in this collection. You could experiment with this method:

document.querySelector('.link').classList.add('hullaballoo');

as an alternative.

Answer №2

Your approach in trying to modify the class of all links is not efficient with your current code.

Instead, I recommend using the following:

event.currentTarget.classList.toggle('hullaballoo');

The event.currentTarget will always refer to the link that was clicked.

If you want all links to have the "hullaballoo" class when one is clicked, you can use:

<a v-for="link in 3" 
   href="#probably-actually-want-a-button"
   @click.prevent="allSelected = !allSelected"
   :class="{ hullaballoo: allSelected }">
   Link {{ link }}
</a>

However, this method does not fully leverage the capabilities of Vue. It's more DOM-focused thinking. Ideally, you should be modifying these classes based on a certain state you're in. To provide a more tailored solution, please clarify your question further.

Answer №3

To retrieve all matching elements in the document, the approved solution can be used.

If you only need to target those within your component, you can achieve this by following these steps:

this.$el.getElementsByClassName('link')

https://v2.vuejs.org/v2/api/#vm-el

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

Error: The src for the image of the double cheeseburger could not be properly parsed by the `next/image` component

Could you kindly take a moment to review this? import Image from "next/image"; import { useState, useEffect } from "react"; import "@/data/data.json"; interface propsData { dish: { id: numbe ...

Having trouble with Mongoose's findOne method not functioning as expected

I am developing an application where users can input data such as the number of hours they slept and their eating habits. This information is then stored in a collection known as the Journal. When a user clicks on "stats", it activates a function called f ...

What is the best way to verify if an Android permission request has been successfully granted or denied

I've been working on my RN application and encountered the following code snippet. import { PermissionsAndroid } from 'react-native'; export default new Promise(() => { return PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS ...

Determine whether the object is facing the specified position

I'm attempting to verify whether an object (this.target) is facing towards a particular position (newPosition). Here's what I currently have: new THREE.Matrix4().lookAt( newPosition, this.target.position, this.target.up ) == this.target.matrix ...

How can one create custom JavaScript UI controls for a UWP application?

I am currently working on a UWP application and I am looking to incorporate JavaScript HTML5 based UI components. Is there a method to integrate this UI into a UWP application? My UI is completely developed using JavaScript, jQuery, CSS, and HTML5, and I w ...

When trying to implement a dark/light theme, CSS variables may not function properly on the body tag

Currently, I am in the process of developing two themes (light and dark) for my React website. I have defined color variables for each theme in the main CSS file as shown below: #light{ --color-bg: #4e4f50; --color-bg-variant: #746c70; --color-primary: #e2 ...

What could be causing such a significant variance in performance for a wrapped JavaScript function?

Here is a code snippet that I have been experimenting with: function Run () { var n = 2*1e7; var inside = 0; while (n--) { if (Math.pow(Math.random(), 2) + Math.pow(Math.random(), 2) < 1) inside++; } return inside; } var s ...

How to Update a Nested Document in Mongoose

I am currently working on a polls application using angular, express, and mongoose. Here is an overview of my data structure: var mongoose = require('mongoose'); var responseSchema = new mongoose.Schema({ responseText: String, votes: { ...

Tips for triggering functions when a user closes the browser or tab in Angular 9

I've exhausted all my research efforts in trying to find a solution that actually works. The problem I am facing is getting two methods from two different services to run when the browser or tab is closed. I attempted using the fetch API, which worke ...

Unable to receive URL parameters using JavaScript on a mobile device

I have been developing a program that displays all users' buttons on a screen, except for the current user's buttons. I came across this code snippet to extract URL parameters: function getParameterByName(name, url) { if (!url) url = window.lo ...

Prevent form submission when processing is in progress

I've got this code working perfectly: $(function() { $("input,textarea").jqBootstrapValidation({ preventSubmit: true, submitError: function($form, event, errors) { // additional error messages or events ...

Packages and Digital Routes

Currently in the process of creating a new website utilizing angular, MVC, and Web API. The plan is to keep the static content (js, css, images, etc) in Site A, the MVC site in Site B, and the api in Site C. These will be separate sites, not virtual direct ...

Having difficulties accessing the properties of a dynamically created JSON object with ng-repeat functionality

Within an ng-repeat loop, I have implemented a radio button that assigns the entire person object to a scope variable as shown below: <li ng-repeat="person in people"> <label>{{person.name}} <input type="radio" ng-model="$parent.s ...

Filtering Gridviews with Javascript or jQuery

My current project involves using an ASP.NET GridView with multiple ListBoxes representing Departments, Categories, Faculties, and more. The data in these ListBoxes and the GridView is dynamically loaded from a MSSQL database in the codebehind. I am in ne ...

Transforming FullCalendar (jquery) into asp.net (ashx)

///////////// Expert //////////////// $(document).ready(function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); $('#calendar').fullCalendar({ ...

Utilizing the power of Angular 4 in combination with mailgun

I need assistance with setting up an email form on my website using Angular 4 and Mailgun as the mail service. I have a method in my mail service file to send messages, but I keep encountering a Bad Request error stating that 'from' is not presen ...

I feel like I'm stuck in a never-ending loop of COR issues that are blocking my progress on

My main focus is establishing a direct connection between a computer and a Raspberry Pi within a local network. It's important to clarify that this project will never have any connection to the internet. The Raspberry Pi is running a NodeJS server th ...

Unable to select image inside linked container

I'm attempting to display a dropdown menu when the user clicks on the gear-img div using jQuery. However, because it's wrapped inside an a tag, clicking redirects me to a URL. I also want the entire div to be clickable. Any suggestions for a solu ...

When attempting to update my avatar using client.user.setAvatar(), the desired changes fail to take effect

Currently, I am attempting to update the bot avatar with a specific user's avatar, but I seem to be encountering some difficulties. I have attempted the following code: client.users.fetch('userid').then((user) => { client.user.setAva ...

Managing HTTP requests across different HTML pages in a Cordova mobile application

I have developed a Multiple Page Application (MPA) for Android and iOS which navigates to different pages when users want to view them. Everything is running smoothly so far, but I now want to add some backend sync features. The issue I am facing is that I ...