Add a conditional class to a particular element in a Vue.js 3.0 list based on certain conditions

I'm trying to dynamically disable a specific link in a list generated by Vue.js. Here is my current implementation:

<ul>
  <li class="nav-item" :key="id" v-for="(item, id) in listOfItems">
    <a class="nav-link" :id="item.id">{{ item.name }}</a>
  </li>
</ul>

Essentially, I want to disable a single link from the listOfItems based on certain conditions and then re-enable it once those conditions change. Applying a conditional class like this impacts all items in the list:

:class="[someCondition = 'something' ? 'disabled' : '']"

How can I specify which item should be disabled when the condition is true?

javascriptcssvue.jsconditional-statementsvuejs3

Answer №1

If you want to implement a check on specific items, consider adding an extra property to each item:

itemsArray: [
  { id: 1, name: 'item1', verify: true },
  { id: 2, name: 'item2', verify: false },
]

Then, utilize object binding and the strict equality operator === for comparison purposes:

:class="{ disableme: item.verify && someOtherCondition === 'anything' }"

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

`Designing a UI in Ionic version 2`

Is it possible to create a layout page in an Ionic v2 application so that the navbar and sidemenu can be displayed on every page without having to add them individually to each page? For example, ASP.NET uses master pages for websites to contain component ...

javascriptangulartypescriptionic2ionic3

Restrict Recursive GraphQL Schema Query Depth with graphql-sequelize resolver in Node.js using express-graphql

In my code, I have two models called User and Post. My goal is to retrieve User information when querying a post, as well as obtain all of a User's posts when querying a user. These two models are associated in the following manner: User.hasMany(Pos ...

javascriptnode.jsgraphqlexpress-graphql

PHP not displaying Javascript error message

Greetings all, I'm new to this forum so please bear with me. I've encountered an issue with my php script. Specifically, when it reaches the point where it checks if the variable $beds equals 'nopref', the only way I can get the message ...

javascriptphp

Is it possible to style a nested ID with CSS?

Imagine a scenario where you are working within an HTML file that you cannot modify, but you have the ability to only edit the CSS through a stylesheet. Is it possible to target an ID within another ID in the same way you can do with classes? #id1 #id2 {s ...

htmlcsscss-selectors

AngularJS does not run the code inside the ref once directive

Code within the block of this.verifyUserToken does not execute. It appears that the issue may stem from asynchronous calls, as the data returned is not yet available. I am unsure of how to proceed in handling this. this.verifyUserToken = function(){ ...

javascriptangularjsfirebaseangularfirefirebase-authentication

Establish a condition that relies on the names found within a specific column of a dataset

In order to focus on only the top three counties with the most observations - Sonoma, Los Angeles, and Kern - we need to create a conditional statement called bigCounties. This variable should be set to TRUE if the data in the county column matches any of ...

rconditional-statements

Can a list be transformed into a toolbar in a responsive design?

Here is my card with a nav section that includes multiple items (although I've only included one here for simplicity). <div class="col-md-3"> <div class="card"> <div class="card-header"> ...

cssbootstrap-4sass

What causes variations in the functionality of 'this' in Vue template?

Imagine a scenario where two different components have templates with the use of 'this'. Currently in the process of removing all instances of 'this' from the templates, but came across an intriguing situation worth exploring. In one c ...

vue.jsvuejs2

Creating universal CSS for all platforms

Seeking assistance in making this Chrome CSS code compatible across different platforms. It currently does not function properly in Firefox and is completely non-functional in IE8. Your help is greatly appreciated, thank you for taking the time to read. . ...

cssgoogle-chrome

Surprisingly stumbled into the 'restricted' directory while switching the current directory to a temporary folder

I've encountered a strange issue while attempting to create and switch the working directory to a temporary folder using Node.js. Check out the code snippet below: var path = require('path') var fse = require('fs-extra') var TEST ...

javascriptnode.jsoperating-systemtemp

What is causing the HTML sub menu to appear in the incorrect position?

I'm working on an HTML and CSS menu. I'm trying to center the sub-menu relative to the main menu (ul.menu). Why is there extra space appearing on the left side? The styling for ul.menu li:hover ul already sets left: 0, and its closest parent i ...

htmlcssmenu

Receiving an "ERR_HTTP_HEADERS_SENT" error message when using Mailgun

One of the functions I have is quite simple - it returns a status along with some JSON data. This function involves saving user input to the database and simultaneously sending an email message using Mailgun. Everything seems to be working fine, however, e ...

javascriptreactjsexpressmongoosemailgun

Storing user input in MongoDB after encoding

I am currently exploring the most effective methods for storing and presenting user input in MongoDB. In traditional SQL databases, it is necessary to encode all user input as a precaution against injection attacks. However, in the context of MongoDB, ther ...

javascriptpythonajaxmongodbunicode

Is there a way to ensure that an image is always smaller than the section it resides in?

Currently, I am in the process of designing a Tumblr theme and have encountered an issue with the avatar image being displayed next to the content. The problem is that the image is larger than the section it's supposed to be contained in, causing it t ...

htmlcss

Styling the `mat-hint` in Angular Material for large blocks of text

Currently, I am undertaking a project in Angular 9 and utilizing Material design. If you want to view a demo of my work, you can find it here: https://stackblitz.com/edit/mat-hint-styling-issue?file=src/app/app.component.html In my project, I am using in ...

cssangularsassangular-materialangular9

Issue with flickering scroll-snap in React component with useState

I've encountered an unusual flickering glitch that only occurs when using the combination of: css scroll-snap useState Sub-Components But it's strange because the issue only arises when these three are combined! https://i.sstatic.net/TvwyW.gif ...

cssreactjsreact-hooksflickerscroll-snap

How can you center a div at the top of another div?

I am working with a nested div structure and trying to center the inner content of one div within another. Is it possible to achieve this using CSS? <div id="outer"> bla, bla....... <div id="inner"> <p>Test</p> </div> ...

csshtml

Step by step guide on including a JavaScript function in a web worker using importScripts

I am encountering an issue with my worker.js file: self.importScripts('/static/utils/utils.js') onmessage = (e) => { let a = e.data[0] let b = e.data[1] let c = func1(a,b) postMessage(c) } The structure of the utils.js file ...

javascriptweb-worker

What could be the reason for my button to update only at the completion of the "each" loop?

Is there a way to update the button text before the loop, so that users can receive feedback while it's running? Currently, the text only updates after the loop has completed. In my scenario, the button displays "Updating please wait..." after the lo ...

javascriptjqueryajax

Nuxt3 and Vue3: A Guide to Changing Rendered Components Dynamically Based on Property Changes

In my Nuxt3 application, I have the following code snippet: <template> <div v-if="conversationId"> <h1>Current conversation: {{ conversationId }}</h1> <ChatWindow :conversationId="conversationId ...

vue.jsnuxt.jsvuejs3nuxt3.js