Ggtcf

I've got a Vue/Nuxt project and I'm having a bit of a weird issue.

I have a component that renders a button with various CSS styles and that's all working fine. I've also got some styles that I need to control via props, so I have these bound to a style tag. This all works on the initial load of the page, however, if I navigate to the page using a Nuxt link, or I make changes to the component and HMR reloads it, then the inline styles disappear.

I've tried to narrow this down a bit by including an inline style that comes from a prop, and an inline style that I have just hardcoded. As before, the style coming from the prop isn't rendered, but the hardcoded style is.

I've had a good Google about but can't find anything that suggests I'm doing something wrong.

EDIT: So I've narrowed it down a bit. It's not the props, it's the linear gradient. Even a hardcoded linear gradient doesn't render.

Here's the component snippet.

<template>
 <span class="button-link" :class=" 'button-link--primary': primary ">
 <span
 class="button-link__gradient-wrapper-one"
 :style="
 backgroundImage: `linear-gradient(to left, $colorStart, $colorEnd);`,
 color: 'red'
 "
 />
 <span
 class="button-link__gradient-wrapper-two"
 :style="
 backgroundImage: `linear-gradient(to left, $colorEnd, $colorStart);`,
 color: 'red'
 "
 />
 <button v-if="!href && !to" class="button-link__button">
 <slot />
 </button>
 <a v-if="href" class="button-link__button" :href="href"><slot /></a>
 <nuxt-link v-if="to" :to="to" class="button-link__button">
 <slot />
 </nuxt-link>
 </span>
</template>

<script>
export default 
 props: 
 primary: 
 type: Boolean,
 default: false
 ,
 colorStart: 
 type: String,
 default: null
 ,
 colorEnd: 
 type: String,
 default: null
 ,
 href: 
 type: String,
 default: null
 ,
 to: 
 type: String,
 default: null
 
 
;
</script>

Thanks

Try with a computed properties. For example:

<template>
 ...
 <span
 class="button-link__gradient-wrapper-one"
 :style="gradientStart"
 />
 <span
 class="button-link__gradient-wrapper-two"
 :style="gradientEnd"
 />
 ...
</template>

computed: 
 gradientStart() 
 return 
 backgroundImage: `linear-gradient(to left, $this.colorStart, $this.colorEnd)`,
 color: "red"
 ;
 ,
 gradientEnd() 
 return 
 backgroundImage: `linear-gradient(to left, $this.colorEnd, $this.colorStart)`,
 color: "red"