'CSS style can't read with pug

Why does my border-color not work. I'm using pug and vue.js. It works until I add the "-" character, then it fails.

<template lang='pug'>
   div
      #section-one
          #grid
              .div(style={border-color: '0087de'})
vue.jspug


Solution 1:[1]

You are using a javascript object to fill the styles. This is fine but border-color is not a valid key. You can use 'border-color' (with quotes). Please also note the missing # in the color. This would result in:

<template lang='pug'>
   div
      #section-one
          #grid
              .div(style={'border-color': '#0087de'})
</template>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 SiggyF

Related Questions