Choose the CSS class based on the content provided

Help needed with CSS issue.

I want to target the <tr> element's class using Bootstrap classes like .success or .danger.

In my Vue.js project, the status name in my object does not align with the .success or .danger classes, but I still need to apply these classes based on the status name.

I have considered two solutions:

  1. Create a JS function that returns the appropriate class name based on the status name. 
    <tr class={{myFunc(object.status)}}>
    .
  2. Extend the Bootstrap class name in SASS. .STATUS { @extend .success; }

As a beginner in frontend development, I used to create simple static HTML pages. Which solution should I go with? Are there any other options I can explore? I tried searching online but haven't found anything useful.
Any advice would be greatly appreciated.

javascriptcsstwitter-bootstrapsassvue.js

Answer №1

If you want to apply classes dynamically in Vue, you can utilize the built-in class directive as shown below:

<tr
  :class="{
    'success': object.status === 'somestatus',
    'error': object.status === 'otherstatus'
  }">
  ...
</tr>

Instead of creating a new method for this purpose, you can refer to the Class & Style Bindings Guide for additional examples and information.

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

Facing an issue where WordPress AJAX is not showing the expected content

Currently, I am in the process of creating a WordPress website that will feature an initial display of two rows of images. Upon clicking a button, two more rows should dynamically appear. There are four key files involved in this project: case-study-ca ...

javascriptphpjqueryajaxwordpress

I am currently implementing a unique scrollbar component to enhance the user experience within my list of options displayed in the MUI Autocomplete feature

Seeking a way to integrate a custom scroll feature from this npm package into the list of options for Material UI autocomplete. Consistency is key in my application, and the default scroll appearance on mui autocomplete doesn't quite align with the re ...

javascriptreactjsmaterial-uiautocomplete

What is the best way to create a function that shifts a musical note up or down by one semitone?

Currently developing a guitar tuning tool and facing some hurdles. Striving to create a function that can take a musical note, an octave, and a direction (up or down), then produce a transposed note by a half step based on the traditional piano layout (i. ...

javascripttypescript

Issue with Google Maps iFrame not loading when utilizing JavaScript variables in the "src" attribute

Currently, I am facing an issue with utilizing JavaScript variables containing GPS latitude and longitude values in the "src" attribute of an iFrame in an HTML file for displaying image EXIF data on a Google Maps iFrame. When I hardcode specific latitude ...

javascripthtmlgoogle-mapsiframe

Encountering an issue with the npm start command in my React application

After using npx create-react-app basic to create a React app, I navigated to the basic folder and attempted to start it with npm start. However, I encountered the following error: npm start <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

javascriptreactjsnpmweb-development-servernpm-start

Encountering an issue: ReferenceError: regeneratorRuntime is not defined when implementing react-speech-recognition in nextjs13

Encountering the errorReferenceError: regeneratorRuntime is not defined in my NextJS project I'm currently using Redux toolkit. Link to my project. Please note that the code triggering the error can be found under the nextjsfrontend branch. I' ...

javascriptreactjsnext.jsspeech-recognitionregenerator-runtime

iPhone 5 Internet Browser - charcoal matte .png with transparent background

When it comes to web design, I often rely on 24-bit transparent .png files. Recently, I was reviewing a website on an iPhone 5 and noticed that all my .png files had a black matte around them. However, when I checked the same website on an iPhone 4, everyt ...

iphonecssmobile

Struggling to make addClass and removeClass function correctly for the development of the unique "15 puzzle" game

I am currently in the process of creating a version of "the 15 game" using jQuery in HTML. You can find more information about the game on this page. The objective of the game is to rearrange a table of "boxes" in ascending order from 1 to 15. Below is th ...

javascriptjqueryhtmlcss

Switching out one block of HTML with another in JavaScript is a powerful way to dynamically update

I am working on creating a feature on a webpage where clicking a button will change the HTML code inside a specific div. Essentially, I want to be able to update the content of a div by simply clicking a link. Here are two different sets of HTML code: Co ...

javascripthtmlcss

The jQuery .each function is malfunctioning specifically on Google Chrome browsers

I developed a web application that utilizes jQuery to automatically submit all forms on the page. The code snippet is as follows: $('form').each(function() { $(this).submit(); }); While this functionality works perfectly in Internet Explore ...

javascriptjqueryhtmlgoogle-chromesubmit

Using Javascript to save a numeric value and accessing it on a different webpage

I'm encountering an issue with a specific feature on my website. I want users to click on a hyperlink that will redirect them to an application form page. The challenge is ensuring that the reference number (a 5-digit code displayed as a header) is st ...

javascripthtml

Create a new modal design by keeping the structure but updating the text and images for

Is there a way to simplify the process of creating multiple modals on my website without having to duplicate and adjust the code each time? I would appreciate any assistance in achieving this! I have a specific modal template that I want to replicate, wit ...

javascriptjquery

Text reveal animation in Framer Motion is not functioning as expected

I'm having trouble locating the issue in my code, and the text reveal feature isn't working. Interestingly, a simple animation works fine, indicating that there's no problem with the import or library: import { motion } from ...

cssreactjsnext.jsgsapframer-motion

The CSS div mysteriously vanishes right before I can trigger the click event

My CSS code looks like this: #searchbar-wrapper input#header-searchbar:focus + #search-dropdown-wrapper { display: block; } The purpose of this code is to make a dropdown visible when a user focuses on a textbox. The default behavior should be th ...

css

How can I designate a default value for a variable within a prop in a Vue.Js component?

I have a question regarding setting a default value for a prop using a getter. props: { userID: { type: String, default: '' } } The default value I want to set is obtained through: computed: { ...mapGetters('Auth&a ...

javascriptvue.js

Is XMLHttpRequest just sitting idle...?

As a newcomer to the world of javascript and AJAX, I've been stuck on a single problem for the past 8 hours. Despite my best efforts, I just can't seem to figure out what's going wrong. On my website, I have an image with an onclick event ca ...

javascriptphpjqueryajax

How can I simultaneously add two elements to a single node or to a node that does not exist in the JSON file?

I thought this would be simple, but I'm struggling to find the answer... var crit = { 'webshopId': webshopId, 'type': 'product'} }; I need to include sku.regularPrice = { $gte : parameters.minPr ...

javascriptjsonnode.js

Interactive JQuery calendar

Can anybody assist me with this issue? I am seeing question marks in the graphic and I'm not sure why. I remember encountering these symbols before and I believe it has something to do with charset. Currently, I am using: <meta http-equiv="Content ...

javascriptjqueryjquery-uidatepickeruidatepicker

Changing Vue-router routes dynamically

Is it possible to dynamically update routes in Vue-router without the need for a page reload? I am currently loading different route paths depending on the selected language, like this: { path: '/' + i18n.t('url_welcome'), name: &apos ...

vue.jsvue-routervue-i18n

Encountering issues with Html.ActionLink in Asp.net MVC when using Bootstrap Select

I am trying to implement a dropdown list for language localization on my website. However, when using <ul> tags with Html.ActionLink, the links are created with language codes as shown below: @{ var routeValues = this.ViewContext.RouteData.Valu ...

jqueryhtmlasp.netasp.net-mvctwitter-bootstrap