Привязка стиля Vue (фоновое изображение) не является реактивной

Я хочу изменить какую-то часть сайта на выбранном языке без обновления. Все сработало, но я пробовал несколько способов динамически привязать фоновое изображение при отсутствии смены языка сайта (i18n). Но безуспешно.

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

Я создал вычисляемую ссылку для возврата используемой в настоящее время ссылки в зависимости от языка.

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

Но после изменения языка сайта в раскрывающемся списке все остальные элементы src обновляются для использования файла изображения на выбранном языке. Но не обновляется только этот фоновый путь. Также удаляется атрибут стиля на самом элементе. Я не могу понять, почему это решение не сработало должным образом. Также отображается mainBackground вычисленным в элементе div. И возвращаемая ссылка обновляется в зависимости от языка.

Я решил проблему, используя привязку классов. 1 урок по турецкому языку и основной класс по всем остальным языкам. И использовал их в условном связывании классов. Решение:

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

vue.js nuxt.js computed-properties computed-style
person WebMan    schedule 08.12.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Он не работает из-за точек с запятой, которые вы ставите в конце директив url (), правила css, установленные в нотации объектов с помощью Vue, не требуют точки с запятой :)

person QcFe    schedule 08.12.2020
comment
Я тестировал и работал. Спасибо. Но при первой загрузке он работает с точкой с запятой в конце. Вот почему я не могу понять, что не так) В любом случае, как вы упомянули без точки с запятой, он работает как при первой загрузке, так и при последующих изменениях. - person WebMan; 09.12.2020