How to retrieve an element using a dynamically generated class name in Vue.js

<v-data-table
:headers="menuheaders"
//this menus from api response
    :items="menus"
        item-key="usersmenu_menuid"
        items-per-page="1000"
        hide-default-footer=""
        class="elevation-1"
        >
            <template v-slot:item.usersmenu_read="{ item }">
                <v-checkbox :class="`read${item.usersmenu_read}`" :value="item.usersmenu_read === 1 ? true : false "></v-checkbox>
            </template>
            <template v-slot:item.usersmenu_edit="{ item }">
                <v-checkbox :class="`edit${item.usersmenu_edit}`" :value="item.usersmenu_edit === 1 ? true : false "></v-checkbox>
            </template>
            <template v-slot:item.usersmenu_add="{ item }">
                <v-checkbox :class="`add${item.usersmenu_add}`" :value="item.usersmenu_add === 1 ? true : false "></v-checkbox>
            </template>
            <template v-slot:item.usersmenu_delete="{ item }">
                <v-checkbox :class="`delete${item.usersmenu_delete}`" :value="item.usersmenu_delete === 1 ? true : false "></v-checkbox>
            </template>
        </v-data-table>

Hi everyone, I'm facing an issue with this code and need some assistance. I'm trying to use the getElementByClassName method.

let read =  document.getElementsByClassName('read${usersmenu_read}')

However, I'm unsure what value to provide in the flag placeholder.

let read =  document.getElementsByClassName(In this flag, What should I fill?)

I would appreciate any insights or explanations on this matter. Thank you all for your help.

Answer №1

Have you considered using $refs in VueJS instead of relying on getElementsByClassName? You can find more information here: https://v2.vuejs.org/v2/api/#ref

 <v-checkbox :class="`read${item.usersmenu_read}`" ref="readCheckbox" :value="item.usersmenu_read === 1 ? true : false "></v-checkbox>

// and use it in the component
this.$refs.readCheckbox

Update: for multiple checkboxes
Instead of assigning a ref directly to each v-checkbox, consider assigning a ref to v-data-table and utilizing Vue $refs as explained above.
Alternatively, if you prefer using getElementsByClass, you can give all your checkboxes a common name like "menu-checkbox". For example:

<v-checkbox class="menu-checkbox" :class="`read${item.usersmenu_read}`" :value="item.usersmenu_read === 1 ? true : false "></v-checkbox>
// repeat for edit/add/delete checkboxes

You can then retrieve all checkboxes by:

document.getElementsByClassName('menu-checkbox')

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

Customize Vue.js: Disable Attribute Quote Removal for Individual Pages

We have a requirement to turn off the minify.removeAttributeQuotes property for certain pages. This is the content of my vue.config.js: const packageJson = require('./package.json') module.exports = { assetsDir: packageJson.name + &apos ...

Tips for utilizing CDN in vue cli?

My experience with packing frontend projects is limited. In the past, I only used JQuery for frontend development. Now, I have a project created by vue-cli and packed by webpack. I would like to load libraries from remote CDNs instead of my local server. ...

Removing data from firestore/storage does not follow the expected pathway

I have created an image gallery for users using Firebase Storage and React, allowing them to upload and delete images. However, I am facing an issue where the deletion process is taking longer than expected. Expected flow: User clicks on the trashcan ico ...

Error encountered in vue.js due to a ReferenceError when the resize event is used

I'm having trouble obtaining the window height when resizing, and I keep encountering the error ReferenceError: calcOfSliderHeight is not defined. Can someone explain what's happening? Here is my code: let example = new Vue({ el: '#exam ...

Designing scroll boxes that are not continuous and tracking the time spent in each section

I'm seeking assistance with a unique challenge involving the creation of scroll boxes for use in a Qualtrics survey and tracking the time spent viewing different sections of text within them. Specifically, I aim to design a scroll box featuring two p ...

Issue: the size of the requested entity is too large

Encountering an error message while using express: Error: request entity too large at module.exports (/Users/michaeljames/Documents/Projects/Proj/mean/node_modules/express/node_modules/connect/node_modules/raw-body/index.js:16:15) at json (/Users/ ...

What is the most creative way you can think of to create a CSS/JS animated

Is using an animated SVG the best way to create these wavy blobs for mobile compatibility? What approach would you take? Here is a similar example I found var wave = document.createElement("div"); wave.className += " wave"; docFrag.appendChil ...

Identifying the presence of node.js on your system

After installing node.js, I found myself at a loss on how to run applications. Despite the lack of instructions, I was determined to test if it was working by executing a script named hello.js: console.log('hello world'); I couldn't help b ...

Adjusting the color of a cell based on its value

Currently, I am in the process of converting a CSV file to an HTML table by utilizing a tool available at . However, I am facing a challenge in modifying the background color of cells based on their values. I would greatly appreciate any help or guidance w ...

Is ES5 essentially the same as ES6 in terms of my lambda search?

After doing a search on an array using ES6, I am having trouble figuring out how to rewrite the code in ES5 due to restrictions with Cordova not allowing me to use lambda functions... $scope.Contact.title = $scope.doctitles[$scope.doctitles.findIndex(fu ...

A 403 error is thrown by the Microsoft Graph API when attempting to delete the authentication method known as "Microsoft Authenticator"

I'm trying to remove a user's Microsoft Authenticator Authentication Method (#microsoft.graph.microsoftAuthenticatorAuthenticationMethod) from their list of authentication methods, but I keep getting a 403 Forbidden error. Below is the code snip ...

Troubleshooting: Custom JQuery function not functioning as expected

I am currently facing an issue with the jQuery in my website while trying to implement a portfolio element. It seems to be related to the changePortfolio() function, but I am unsure of how to resolve it. $('.projects a[href^="#"]').on('clic ...

What is the mechanism behind $scope.$on activation and $destroy invocation?

Seeking an explanation on the functionality of $scope.$on and how $destroy works in two separate controllers. When switching routes, a new controller is invoked, leading to the activation of $destroy. Could someone shed some light on how $interval is in ...

Node.js may not always save Winston log files when using process.exit()

I'm struggling to grasp a particular concept... when I use process.exit() in a program that logs events to both the console and a file, all the log events are displayed on the console as expected, but only the first one (or none at all) is actually sa ...

The isolate scope variable is becoming undefined within the link function

When working with a directive that takes a data object and a function in its isolate scope, I encountered an issue. Inside the link function, I declared a method to be triggered on a button click event. The problem is that while the value passed to the me ...

Having trouble with jest mocking a function - it's not functioning as expected

I decided to create a simple test using jest to simulate a date change function. Here is the code snippet: import React from 'react'; import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react' ...

What is the reason that when we assign `'initial'` as the value for `display` property, it does not function as intended for list elements?

To toggle the visibility of elements, I have created a unique function that accepts an object and a boolean. Depending on the boolean value, either 'none' or 'initial' is assigned to the 'display' property of the specified obj ...

having difficulty showing the column filter feature in the DataTable

I am currently utilizing a datatable and in need of an individual column-based search feature along with a global search. I am working with a 2D array. The search boxes are being displayed, however, the search functionality is not functioning correctly fo ...

What is the process for saving an HTML document with SaveFile.js?

I'm currently implementing a save feature for my website. Utilizing the 'SaveFile.js' module from this link: 'https://github.com/eligrey/FileSaver.js/' Once the user clicks on the save button, the goal is to have the entire documen ...

Would you suggest this approach for creating a personalized form component in vue 3?

CustomInput.vue <template> <input v-model="customModelValue"> </template> <script setup lang="ts"> import {computed} from "vue"; const customEmit = defineEmits(['update:customModelValue']) ...