What is the best way to implement conditional styling in Vue.js?

Looking to incorporate a conditional style into my Component. Here is my component:

    <site-pricing
        color="primary"
        currency="$"
        price="25"
        to="/purchase"
>
        <template v-slot:title>Complete</template>
        <template v-slot:desc>{{ $t('plans.completeDesc' )}}</template>
        <template v-slot:planSuffix>/ {{ $t('plans.oneTime' )}}</template>
        <template v-slot:features>
          <ul>
            <li>{{ $t('plans.xchats', [ 200 ] )}}</li>
            <li>{{ $t('plans.sDomain' )}}</li>
          </ul>
        </template>
        <template v-slot:footer>{{ $t('plans.oneTime' )}}</template>
</site-pricing>

I am aiming to implement an unique styling - if 'color = primary', then include a border-top: 5px red...

Answer №1

If you want to incorporate conditional style binding in Vue, here's an example for you:

new Vue({
  el: '#app',
  data: {
    color: "secondary"
  },
  methods: {
    toggleColor(val) {
      this.color = val
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div :style="[color==='primary' ? {color: 'red'} : {color: 'blue'}]">Primary</div>
<div :style="[color==='secondary' ? {color: 'red'} : {color: 'blue'}]">Secondary</div>
<button @click="(e) => toggleColor('primary')">Switch to primary</button>
<button @click="(e) => toggleColor('secondary')">Switch to secondary</button>
</div>

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

Laravel - Jetstream with InertiaJS: Implementing guards in the main header menu of AppLayout.vue

Is there a way to utilize guards for adding a specific admin menu entry using guards? I am aware that passing guard-"data" from controllers to view is possible as mentioned in the documentation: class UsersController extends Controller { public functio ...

Is there a way to ensure that the div of my template spans 100% in width and height?

I'm attempting to make my div 100% in size but I am having trouble achieving it. Here is my code: <template> <div> <Navbar/> <Calendar/> </div> </template> <script setup> import Calendar from &apos ...

After a complete page refresh, Vue.js route parameters are not retained

When passing a user id from the router-link using params to display the user's detail on the profile page, everything works correctly. However, upon reloading the page, $route.params.id changes to undefined and the displayed data disappears. To retrie ...

Flex wrap is causing additional space within the layout

When using flex-wrap, if there are more textBoxes than the available width in the container, they shift to the next line. This is fine, but it leaves too much space between the button and the textBox. This spacing issue can make the layout look odd. I hav ...

Is it possible to incorporate @ngrx into a Vue project?

Looking for a state management solution to connect our desktop Angular app and mobile Vue app, both sharing APIs and functionalities. As a newcomer to RxJS and state management tools like Ngrx, I'm curious if there are any hindrances in directing Vue ...

What is the correct way to adjust the style.top attribute of an element using JavaScript?

In order to correct a JavaScript source code, I need to adjust the style.top property of a div element based on an integer parameter from a function called index. Here is the current implementation: div.style.top = (index * 22 + 2)+"px"; However, for lar ...

Struggling to eliminate the unseen padding or white space preventing the text from wrapping under the button

Just starting out with html and css and could use some assistance with a small issue I've come across. While redesigning a website, I have a three-button form (Donate, Find, Subscribe). I'm trying to get the paragraph underneath the Donate and Fi ...

Determine the starting position of a div's CSS bottom using jQuery before the hover animation begins

Currently, I am in search of the CSS value 'bottom' for each div that belongs to the 'shelf-info-text' class. These particular divs can be found inside a parent div called 'shelf-item'. The bottom value is determined automati ...

After deploying DRF, the CSS in Django admin is not displaying

After developing a web application using Django Rest Framework and React, I faced an issue during deployment on IIS. While the deployment is successful, I encountered a problem with the Django Admin where the styles were not displaying properly. This led t ...

The Firebase Authentication JS library does not properly fill the `providerData` array

Within my VueJS / QuasarJS application, I am utilizing firebase-js-sdk [1] in conjunction with firebaseui-web [2] to manage authentication processes. After a successful authentication using any of the configured providers (such as password, google, apple, ...

When using Owl Carousel in Chrome, the carousel unexpectedly stops after switching tabs

Hi there, I'm currently testing out the auto play feature in owl carousel. One issue I've encountered is that when I switch to another tab in Chrome and then return to my webpage with the carousel, it stops functioning unless I manually drag the ...

What is causing justifyContent: space-between not to function properly?

I want to display Text1Text2Text3Text4Text5Text6Text7 at the top with text alignment using justifyContent: 'space-between'. However, when I tried to do so, all texts ended up at the top. <div style={{display: 'flex-item', flex: 1, ...

Adjust the size of every card in a row when one card is resized

At the top of the page, I have four cards that are visible. Each card's height adjusts based on its content and will resize when the window size is changed. My goal is to ensure that all cards in the same row have equal heights. To see a demo, visit: ...

Strategies for implementing a minimum height for grid-template-column containers

Here's an issue I'm facing: when the first container has content, the other two containers without content end up being the same height as the first one: Check out this JSFiddle link for reference .grid { padding: 5 ...

Error message in TinyMCE stating that the right-hand side of the 'instanceof' operator is not callable

For over a year now, I have been utilizing TinyMCE on my website without any issues. However, today it has suddenly ceased functioning and is displaying the following error message. Can anyone provide guidance on resolving this issue? ...

Mastering the art of gracefully transitioning to a fallback option when CSS grid

When it comes to creating a simple grid of squares (3x3 at most, filling in top to bottom left to right), I have encountered challenges with both flexbox and grid. The DOM structure required for each method seems incompatible or too complex to support both ...

Changes in a deep copy of an object in a child component are directly reflected in the parent object in VueJS

Let's begin by discussing the layout. I have a page dedicated to showcasing information about a specific company, with a component Classification.vue. This component displays categories of labels and the actual labels assigned to the current company. ...

Sending a string of HTML elements to a Vue custom directive is causing problems with the eslint code analysis

I have developed two custom Vue directives to add an HTML element before or after another element. I provide an HTML string to the element where I apply the directive, but I am encountering an error in VS Code: Parsing error: unexpected-character-in-a ...

Pictures Unavailable to Show in Table

I've been working on a project where I need to insert some images into a table. Usually, this isn't an issue for me. However, today when I added the images to the table, all I see is a square border with the alt text inside it. I'm confident ...

The Vue.js Vuetify.js error message is saying "A mystery custom element: <v-list-item>, <v-list-item-title> - Have you properly registered the component?"

I followed the instructions from Vuetify Data Iterator Filter section I am able to use various Vuetify components like v-btn, v-card, v-data-table, v-data-iterator, and more. However, I encountered errors only with <v-list-item> and <v-list-item ...