bootstrap-vue: String `:style` notation not working in `` (at least)

Describe the bug

In <b-col> components (at least), the :style attribute is limited to object notation. This might be the case with more Bootstrap Vue components but it should be considered a bug, since it’s a clear limitation from :style normal behavior on Vue components.

Steps to reproduce the bug

Please see this question and this answer.

Expected behavior

String :style properties passed to Bootstrap Vue components should apply correctly.

Versions

Libraries:

  • BootstrapVue: 2.0.0-rc.22
  • Bootstrap: 4.3.1
  • Vue: 2.6.10

Environment:

  • Device: [MacBook Pro]
  • OS: [Windows 10]
  • Browser: [Chrome]
  • Version: [74.0.3729.169]

It should be expected this bug is Bootstrap Vue specific and would be encountered across any device + OS + browser combo.

Demo link

https://stackoverflow.com/questions/56401806/how-to-bind-custom-style-in-b-col-bootstrap-vue-element

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 15 (15 by maintainers)

Most upvoted comments

I will create an issue on Vue, re: passing an array of styles which has an entry which is a string.

Create an issue on VFDM if there are any more edge cases. The impact this has on execution time is pretty minimal, so I think this maintains the zero cost usage of VFDM. Win win! Thanks for the implementation guide–made it easy to get it working!