dynamic class binding in nuxtjs/vuejs with tailwind classes

Question

I am assigning css classes according to some timer to a div.

s0 can be 0 - 5

this assignment (as below) works fine but it feels like it is a lot of overhead in both writing and performance. Is there another way to assign css classes dynamically in nuxt?

e.g. writing class="-mt-{s0*8}" directly on the template? Why is there a need for a boolean to return? Am I missing something?

  <template> 
    <div class="secs-0" :class='{"-mt-8": oct(s0, 8),
                                      "-mt-16": oct(s0, 16),
                                      "-mt-24": oct(s0, 24),
                                      "-mt-32": oct(s0, 32),
                                      "-mt-40": oct(s0, 40)}'>

...



<script>
    ...
    methods: {
         oct(o, p) {
          return o*8 == p
         }
    },
    ...

score 3 · Accepted Answer · edited Jul 15 '22 at 02:32

3

I needed to look at Class and Style Bindings at vuejs.org, not nuxtjs.org (where I found nothing :-)

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

The proper way to do this, is to use the array syntax "['']" with string concatenation as @tao showed in the comments

 <template> 
    <div class="secs-0" :class="['-mt-'+h0*8]">

@tao also made a proper jsfiddle, thank you!

https://jsfiddle.net/websiter/f5zdstex/

edited Jul 15 '22 at 02:32

tony19

125,647
18
229
307

answered Jan 22 '21 at 12:27

mahatmanich

10,791
5
63
82

1

You'll probably find this syntax handy in your case: `:class="['-mt-' + s0 * 8]"` – tao Jan 22 '21 at 12:33
Here's a [tiny toy](https://jsfiddle.net/websiter/f5zdstex/). – tao Jan 22 '21 at 12:50

dynamic class binding in nuxtjs/vuejs with tailwind classes

1 Answers1