VueJS-добавить стиль css с помощью v-html


VueJS-добавить стиль css с помощью v-html

25.09.2020 05:38:53 Просмотров 43 Источник

Я хотел бы добавить html-контент из базы данных (чтобы часть содержимого страницы можно было изменить извне).

Как добавить стиль SCSS? Я использую v-html, как это, но я понятия не имею, как добавить стиль:

<div v-html="ct"></div>

async created() {
   this.ct = await this.getPage("blabla");
}

Я бы предпочел не добавлять часть SCSS в стиль vuejs, и у меня уже есть некоторые другие CSS для другой части кода, но при необходимости стиль может быть определен в этих активах

<style lang="scss" scoped>
    @import '~assets/styles/core';
</style>

Я нашел несколько ответов, но не похоже, что стиль исходит из другого источника Стиль Vue.js в формате HTML с прицелом для CSS или Добавить CSS стиль в формате HTML

У вопроса есть решение - Посмотреть?

Ответы - VueJS-добавить стиль css с помощью v-html / VueJS - add css style with v-html

Является ответом!
selfagency

25.09.2020 05:51:02

При использовании CSS с областью видимости Vue создает динамически генерируемые селекторы для ссылок на элементы. Однако содержимое v-html не получает динамически генерируемых селекторов, потому что Vue не динамически создает этот HTML-код, а просто сбрасывает его. Поэтому, если вы используете v-html, стили области видимости, определенные в Родительском компоненте(компонентах), не будут применяться к дочерним компонентам без использования глубоких селекторов.

Вам нужно либо сохранить свои стили глобальными, импортировать таблицу стилей через конфигурацию Webpack, чтобы имена классов не изменялись Vue в соответствии с динамическими селекторами экземпляров Vue, либо взять стили, специфичные для дочерних элементов v-html, и переписать их для использования глубоких селекторов.

Помочь в развитии проекта:
Закрыть X