How to v-bind conditional styles with Vuejs depending on a bootstrap breakpoint?

Question

I'm trying to assign a dynamic style for a different bootstrap breakpoints. To change the position, etc. if the display is different width. So I'm applying v-bind style directive with vue. Am I doing it properly?

While the console gives an error - Whitespace was expected.

<div class="footer" :style="{$bootstrap.breakpoint.md ? "white" : "black"}">
</div>

<script>
   white: {
        background:
          'white',
      },
  black: {
        background:
          'black',
      },
</script>

It's not necessary to use the bootstrap brakepoints, though, can it be done with media queries?

JoeGalind · Accepted Answer · 2023-10-07 14:58:18Z

0

You should use single quotes on ‘white’ and ‘black’ on the statement, if not, javascript thinks you are closing the opening “, hence causing a syntax error

 :style="{$bootstrap.breakpoint.md ? 'white' : 'black'}"

answered Oct 7, 2023 at 14:58

JoeGalind

3,8342 gold badges33 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to v-bind conditional styles with Vuejs depending on a bootstrap breakpoint?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related