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/

Answer 1

You need to surround width and height values with ' '

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

Answer 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.