Using Vue to bind a class attribute with multiple Tailwind classes

Question

Using Vue to bind a class attribute with multiple Tailwind classes

I am attempting to associate an attribute and multiple tailwind classes with an HTML element. This is specifically for a tab menu where the goal is to dynamically display the title of the "active" tab and apply additional tailwind classes to modify the appearance of the selected tabs.

        <li
            :class="{
                selected: title === selectedTitle,
                selected ? ['border-b-2', 'border-blue-700' ]
            }"
            @click.stop.prevent="selectedTitle = title"
            v-for="title in tabTitles"
            :key="title"
            role="presentation"
        >

Unfortunately, the current implementation of the code above is not yielding the desired outcome for me.

javascript css vue.js tailwind-css

Answer 1

Answer №1

After analyzing the code, it appears that the following line may not function correctly:

selected ? ['border-b-2', 'border-blue-700' ]

In this scenario, it seems like a ternary operator without an else statement. It might be more effective to rewrite it as follows:

<li :class="{
  'selected border-b-2 border-blue-700': title === selectedTitle,
}">

Answer 2

After analyzing the code, it appears that the following line may not function correctly:

selected ? ['border-b-2', 'border-blue-700' ]

In this scenario, it seems like a ternary operator without an else statement. It might be more effective to rewrite it as follows:

<li :class="{
  'selected border-b-2 border-blue-700': title === selectedTitle,
}">

Answer 3

Answer №2

Here is an example of how to do it:

new Vue({
  el: "#demo",
  data() {
    return {
      tabTitles: ['aaa', 'bbb', 'ccc'],
      selectedTitle: ''
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="demo">
  <li :class=" selectedTitle === title ? 'border-b-2 border-blue-700' : '' "
      @click.stop.prevent="selectedTitle = title"
      v-for="title in tabTitles"
      :key="title"
      role="presentation"
  >{{title}}</li>
</div>

Answer 4

Here is an example of how to do it:

new Vue({
  el: "#demo",
  data() {
    return {
      tabTitles: ['aaa', 'bbb', 'ccc'],
      selectedTitle: ''
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="demo">
  <li :class=" selectedTitle === title ? 'border-b-2 border-blue-700' : '' "
      @click.stop.prevent="selectedTitle = title"
      v-for="title in tabTitles"
      :key="title"
      role="presentation"
  >{{title}}</li>
</div>

Using Vue to bind a class attribute with multiple Tailwind classes

Answer №1

Answer №2

Similar questions

Discover the ultimate guide to creating an interactive website using solely JavaScript, without relying on any server-side

Combining AngularJS with Servlets: A Seamless Integration

Concealing certain options in a dropdown list with jQuery Chosen

Executing ajax requests in MVC 5 using Webgrid

What methods and technologies are accessible for executing JavaScript through PHP?

The exception handling in Vue JS (router.beforeEach) encountered an issue while trying to convert the exception

Is the z-index feature not functioning as anticipated?

Strategies for styling the contents within <details> while excluding <summary> in CSS

AngularJS ui-select not responding correctly to selected items

Develop a responsive design for a row of icons that automatically flows to a second line when the screen size is

Exploring Javascript: Understanding the Contrast Between Function and Class

What is the proper way to access the current value of a computed property from within its own computation method?

Can you suggest a method to align this form to the center?

Utilize jquery and css to effectively stack images and control their positioning on hover

Issue: TypeError: Unable to access the 'getBoundingClientRect' property of an undefined value

Fetching data in a post request seems to be causing an issue with FormData image being

Begin your journey with Foundation Navigation as it seamlessly transitions from left to right

jQuery SlideDown Navigation

When hovering over a div, reveal another div on top of a third div

What is the best way to transfer variables defined in PHP to JavaScript?