Привязка VueJS / Nuxt Style работает только при полной перезагрузке

Question

У меня есть проект Vue / Nuxt, и у меня возникла странная проблема.

У меня есть компонент, который отображает кнопку с различными стилями CSS, и все это работает нормально. У меня также есть несколько стилей, которые мне нужно контролировать с помощью реквизита, поэтому я привязал их к тегу стиля. Это все работает при начальной загрузке страницы, однако, если я перехожу на страницу с помощью ссылки Nuxt или вносю изменения в компонент и HMR перезагружает его, тогда встроенные стили исчезают.

Я попытался немного сузить это, включив встроенный стиль, который исходит от опоры, и встроенный стиль, который я только что жестко закодировал. Как и прежде, стиль, исходящий из опоры, не отображается, но стиль в жестком коде:

У меня был хороший Google, но я не могу найти ничего, что подсказывает, что я делаю что-то не так.

РЕДАКТИРОВАТЬ : Так что я немного сузил. Это не реквизит, это линейный градиент. Даже жестко закодированный линейный градиент не рендерится.

Вот фрагмент кода.

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

Спасибо

Answer 1

Попробуйте с вычисленными свойствами.Например:

<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"
    }
  }
}