VueJS data-bind object styling not working

Question

I'm playing around in VueJS styling with v-bind, I noticed something particular, when I switch from v-bind inline styling to v-bind object styling. The inline style works fine. However, when I create an object in Vue, and try to style with the object, the width and height do not style, even though the rest does.

I realize this is most likely a syntax error, I tried adding quotes around value of height & width.

<span :style="progbar">80%</span>

// styling:

progbar:{
   height: 20,
   width: 800,  
   backgroundColor: 'red',
   color: 'white',
   fontSize: '30px'

   }

I expect to see a bar of 800 width, however that is not showing up and I can't figure out why. The full code is at: https://jsfiddle.net/totoro183/nho1jv37/51/

José Silva · Accepted Answer · 2019-05-07 22:37:54Z

2

Use <div :style="progbar">80%</div> instead of span. It works with div and no with span because span is an inline element. It has no width or height.

answered May 7, 2019 at 22:37

José Silva

4113 silver badges13 bronze badges

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

3 Comments

Toni He Over a year ago

I see this an inline vs. block issue then. I tried adding progress-bar class to 'span' and realized that worked too. Thanks!

onuriltan Over a year ago

Correct, span is not block-level element. Try adding display='block' to progbar object

José Silva Over a year ago

Yep, you can add display: 'block', to the progbar object and you have a span as a block element.

onuriltan · Accepted Answer · 2019-05-07 22:18:40Z

0

You need to surround width and height values with ' '

progbar:{
   height: '20px',
   width: '800px',
   ...

answered May 7, 2019 at 22:18

onuriltan

3,9285 gold badges28 silver badges40 bronze badges

Collectives™ on Stack Overflow

VueJS data-bind object styling not working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related