#vue.js #nuxt.js #computed-properties #computed-style
#vue.js #nuxt.js #вычисляемые свойства #вычисляемый стиль
Вопрос:
Я хочу изменить некоторую часть сайта на основе выбранного языка без какого-либо обновления. Все сработало, но я пробовал несколько способов динамической привязки фонового изображения при изменении языка сайта без обновления (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' : '']"
Ответ №1:
Это не работает из-за точек с запятой, которые вы ставите в конце директив url (), правила css, установленные в объектной нотации с помощью Vue, не требуют точек с запятой 🙂
Комментарии:
1. Я протестировал и работал. Спасибо. Но при первой загрузке он работает с конечной точкой с запятой. Вот почему я не могу понять, что не так) В любом случае, как вы упомянули, без точек с запятой это работает как при первой загрузке, так и при последующих изменениях.