Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Correct way of dynamically binding a tailwind classes in vuejs3/nuxtjs3?

does someone of you know, what the correct way of dynamically binding the content tailwind class in vuejs3/nuxtjs3 is? Let’s assume, that const isExpanded = true

<h1 :class="{'after:content-[`:`]' : isExpanded}">Hello</h1>

I have tried it with backticks (`) but it ain’t working.

Please help.

Tags:

2

Answers


  1. 0

    Use to escape the inner apostrophes ' so they don’t prematurely close the outer string

    <h1 :class="{'after:content-['_↗']' : isExpanded}">Hello</h1>
    Login or Signup to reply.
  2. 0

    As one of the solutions, instead of binding CSS classes to an object, you can bind to an array, as in the example:

    <h1 :class="[isExpanded ? `after:content-[':']` : ``]">Hello</h1>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search