Vue 样式（背景图像）绑定不是反应式的

Question

我想根据所选语言更改网站的某些部分而不进行任何刷新。一切正常，但我尝试了多种方法 动态绑定背景图像 无需刷新站点语言更改 (i18n)。但是没有成功。

<div :style="{'background-image' : mainBackground}">
     test div
</div>

我创建了一个基于语言的 return 当前使用 link 的计算。

mainBackground(){
    return this.isTurkishSite ? 'url(/images/home/home_bg_main_tr.jpg);' : 'url(/images/home/home_bg_main.jpg);'
}

但在通过下拉菜单更改站点语言后，所有其他 元素 src 都会更新 以使用所选语言的图像文件。 但只有这个后台路径没有更新。元素本身的样式属性也被删除。我不明白为什么这个解决方案不能正常工作。还将 mainBackground 计算渲染到 div 元素中。 returned link 是根据语言更新的。

我已经使用 class 绑定 解决了这个问题。 1 class 用于土耳其语，main class 用于所有其他语言。并在条件 class 绑定中使用它们。解决方案：

:class="[isTurkishSite ? 'bg-turkish' : '']"

Answer 1

它不起作用，因为您在 url() 指令末尾放置了分号，css 在对象表示法中使用 Vue 设置的规则不需要分号:)

Vue 样式（背景图像）绑定不是反应式的

Vue style (background-image) binding not reactive

vue.js

nuxt.js

computed-properties

computed-style