Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Navbar binding for style attribute does not work

See original GitHub issue

I would like to set the background color of my navbar based on a database value. However, :style seems not to work (it is being ignored) with the b-navbar component.

I exported this JS Fiddle from playground: https://jsfiddle.net/87wpvsrf/1/

I put various elements that show where it should work, in some it does. Navbar elements can have a regular style attribute, but I need a binding.

Issue Analytics

State:
Created 5 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

tmorehousecommented, Dec 19, 2018

Vue is limited and needs the object notation to apply styles. See https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles

1reaction

jacobmllr95commented, Dec 19, 2018

This is resolved by now using the following markup:

<b-navbar :style="{ 'background-color': 'orange' }">
  <b-navbar-brand href="#">NavBar</b-navbar-brand>
</b-navbar>

Top Results From Across the Web

style binding not working - Stack Overflow

Just missing some () to unwrap (read) your observable properties in your if/else logic: Instead of: databadge: warnings ?

Attribute binding - Angular

Attribute binding in Angular helps you set values for attributes directly. With attribute binding, you can improve accessibility, style your application ...

Lesson 1: Understanding ID and Class in CSS

In this lesson you will learn how ID and Class attributes can be used to stylize individual elements (id) or groups of elements...

Keyboard-navigable JavaScript widgets - Accessibility | MDN

Web applications often use JavaScript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels.

x-bind - Alpine.js

x-bind allows you to set HTML attributes on elements based on the result of ... When using object-syntax, Alpine will NOT preserve original...