Solution for vue to be able to modify styles by rich text rendered by v-html directive

1. Problem description

Problem encountered in recent vue projects: rich text rendered by v-html, unable to modify styles in stylesheets.

The code is as follows: The picture in -context is modified to adaptive, but has no effect.

<div class="article-context" v-html=""></div>

<style scoped>
.article-context img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>

2. Analyze the reasons

Why is this? The reason is very simple: if the image (img tag) is written first in the template, then its style can be modified in the <style> tag.
I guess this should be the specification of vue compilation, and elements that are not rendered in the virtual dom cannot be modified.

3. Solution

Solution 1(Recommended): In the updated lifecycle function, js dynamically sets the style, and the code is as follows:

<script>
import $ from 'jquery'

export default {
updated() {
  $('.article-context').find('img').css({
    "width": "auto",
    "height": "auto",
    'max-width': '100%',
    'max-height': '100%'
  });
}
</script>

Solution 2(Not recommended): Remove the scoped attribute in the style tag; as for the reason? Without careful research, I had the problem that the rich text editor could not be initialized during use.

<style>
.article-context img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>

This is the article about the solution of the unmodified style of the rich text rendered by vue through the v-html directive. For more related content related to vue v-html rich text, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!