Utilize conditional styling in Vue using CSS

I am having difficulty implementing a conditional Vue statement to change the CSS style based on the text value. Despite trying other tutorials, I have had no success due to my limited experience with Vue.

For example, if I want the class to be "is-success" when {{s.specialType}} == "food" AND "is-danger" when {{s.specialType}} == "drink", how can I achieve this?

Any assistance would be greatly appreciated. Thank you

<div v-for="s in spc.specials" class="column is-one-third">
    <div class="field">
        <span class="tag is-success is-capitalized">{{s.specialType}}</span>
    </div>
</div>
javascriptvue.js

Answer №1

Utilizing v-bind:class can make this possible.

<span v-bind:class="{'is-success': s.specialType==='food', 'is-danger': s.specialType==='drink'}" class="tag is-capitalized">
  {{s.specialType}}
</span>

Source: https://v2.vuejs.org/v2/guide/class-and-style.html

Answer №2

My search for ways to conditionally render elements led me to this neat solution:

<div v-for="p in products" class="column is-one-third">
<div class="field">
  <span class="tag is-success is-capitalized" v-if="p.type === 'clothing'">
    {{p.type}}
  </span>
  <span class="tag is-danger is-capitalized" v-else-if="p.type === 'electronics'">
    {{p.type}}
  </span>
</div>

Check out Vue.js documentation for more 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

When transmitting information to the server, the browser initiates four requests

I am encountering an issue with my React component. The problem arises when I try to retrieve the current geographic coordinates, as they are being fetched 4 times consecutively. This same glitch occurs when attempting to send the coordinates to the serv ...

javascriptreactjstypescriptfetchnavigator

Guide to executing API PATCH request on the server for a system that approves outings?

I have developed a system for approving outings using the MERN Stack. I wrote code to change the leave status to "Approved", but the changes are not saved when I refresh the page. The PATCH request works fine through Postman. Mongoose Schema Snippet for l ...

javascriptnode.jsmongodbmongoosecrud

Customize the default directory for local node modules installation in node.js using npm

If I prefer not to have my local (per project) packages installed in the node_modules directory, but rather in a directory named sources/node_modules, is there a way to override this like you can with bower? In bower, you specify the location using a .bow ...

javascriptnode.jsnpmbowernpm-install

Using JavaScript to send formatted text through POST requests in a Rails application

Within APP A, I have the following formatted text: A beautiful painting because I created it because an artist endorsed it because my cat loves it I can access this formatted text in index.html.erb through product.body_html, which I then load into a Ja ...

javascriptjqueryruby-on-railsrubyjson

Unusual body padding found in the mobile design

When visiting on a mobile device and inspecting the elements in Google Chrome, try disabling the style rule overflow-x: hidden from the body element and then resizing the window. You may notice a white vertical stripe (padding) appearing on the right side ...

javascripthtmlcss

Struggling to locate the index of the matching object within an array of objects?

There is a dataset available: var data = { "variants": [{ "quantity": "20", "varientId": 8, "currency": "YEN", "extraField": { "Size": "1 ...

javascriptarraysjsonobjectequality-operator

Unable to view the HTML division

I am struggling with my website creation as I encounter issues with the .Main div. Despite setting background-color: orange; in the CSS, the color is not visible on the page. The inspector shows that it is positioned at 1440 x 0. Any assistance would be gr ...

javascripthtmlcss

NextJs Link component does not refresh scripts

While using the <Link> tag in NextJs for page navigation, I encountered an issue where my scripts do not rerun after switching pages. The scripts only run on the initial page load or when I manually reload the page. This behavior is different when us ...

javascriptreactjstypescriptnext.jsnext-link

Constantly monitoring the current window width

Is there a way to dynamically get the width of the browser as it is resized in real time? I have found a solution that provides the width, but it only updates when I refresh the page. How can I continuously update the value while resizing the browser? Thi ...

javascriptreactjswindow

Guide to using the ng-click function in Angular to set focus on the input in the last row of a table

I am in the process of developing a task management application and I am looking to implement a specific feature: Upon clicking 'Add Task', a new row is automatically added to the table (this part has been completed) and the input field within ...

javascriptangularjs

Struggling with integrating Bootstrap into a Vue.js application due to a compatibility problem with

I am facing difficulties importing Bootstrap features such as modal in a Vue component that uses installed packages like bootstrap, popper.js, and jquery. I am working with nuxtjs for this project. Unfortunately, when trying to import these features, I en ...

jqueryvue.jswebpackbootstrap-4nuxt.js

When passing parameters through a URL in TypeScript, the display shows up as "[object object]" rather than as a string

Hey there! I'm trying to pass some string parameters to my URL to fetch information from an API. Everything seems fine, and when displayed in an alert, the URL looks exactly as it should (no [object, object] issue). var startDate = "2020-09-20"; var ...

javascriptangulartypescripthttp

Why is it that useEffect is functioning correctly only on the first occasion?

Recently, I've been facing significant challenges with React's useEffect and States. The issue arises when I redirect to the main page of my app and then attempt to use them again. In the following component, everything seems to function correct ...

javascriptreactjsuse-effectuse-statesetstate

Having trouble transferring a PHP string to jQuery

I recently set up a script on my computer that displays a list of active interfaces: $ interfaces eth0 lo wlan0 Now, let me share my PHP code snippet with you: <?php $output=shell_exec('./interfaces'); $string = trim(preg_replace(&ap ...

phpjavascriptjqueryajaxjson

Implementing Autocomplete search with jQuery Chosen plugin - a step-by-step guide

CSS <select class="custom" id="company_hub" name="company_hub" style="width: 400px; display: none;"> <option>-Select Item-</option> </select> https://i.sstatic.net/x4YtN.png I attempted the following method but it was unsucces ...

javascriptjqueryajaxjquery-uijquery-chosen

Using Vue to perform multiplication on data table entries

Is there a way I can use Vue.js to multiply values in a table? The values provided are for 100g of the product. For example, if I input 200g, I would like the values to double: 318kcal, 12 fat, 48 carbs, 8 protein, and 2% iron. Similarly, inputting 50g sho ...

javascriptvue.jsvuetify.js

What is the method to have VIM recognize backticks as quotes?

Currently working in TypeScript, I am hoping to utilize commands such as ciq for modifying the inner content of a template literal. However, it appears that the q component of the command only recognizes single and double quotation marks as acceptable ch ...

javascripttypescriptvscodevim

There seems to be an issue with the Url.Action method as it

I'm working with this script: $(function() { $.support.cors = true; jQuery.support.cors = true; $.ajax({ crossDomain: true, type: 'GET', url: 'http://example.com/WCFRESTService.svc/GetCategories&apos ...

javascriptjqueryajaxasp.net-mvc

In what way can the button display the permission directly on the page?

When the website notification is granted, a green button should be displayed. If it is denied, show a red button instead. The button comes with a CSS style and a checkbox but does not have the permission to grant or allow any permissions on the page. Butt ...

javascripthtmlcss

Tips for creating a custom Menu with content overflow in a single direction

What is the goal of this task? I have developed a custom Menu in my application with 8 options. There is a need to dynamically disable certain menu options based on specific conditions (e.g. disabling the last 4 options). When a user hovers over a disable ...

javascripthtmlcssoverflow