Question

我有一个Vue / Nuxt项目，但有一个奇怪的问题。

我有一个组件，可以呈现具有各种CSS样式的按钮，并且一切正常。我还有一些需要通过道具控制的样式，因此我将这些样式绑定到了样式标签。所有这些都可以在页面的初始加载上起作用，但是，如果我使用Nuxt链接导航到页面，或者对组件进行更改并由HMR重新加载，则内联样式就会消失。

我尝试通过包含来自prop的内联样式以及我刚刚硬编码的内联样式来缩小范围。和以前一样，道具的样式不会被渲染，而硬编码的样式会被渲染。

我有一个不错的Google公司，但找不到任何表明我做错了事的事情。

编辑：所以我将范围缩小了一些。不是道具，而是线性渐变。甚至硬编码的线性渐变也不会呈现。

这是组件摘要。

select c.* from contracts c join territories t 
    on c.Id = t.contract_id 
    where not exists ( select 1 from territories t1 
                      where t1.contract_id=t.contract_id
                      and t1.name <> 'china'

                     ) and t.name='china'

谢谢

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

VueJS / Nuxt样式绑定仅适用于硬重载

1 个答案: