Vue.js: How can I make dynamically generated HTML using CSS?

Question

Short version:

I am generating an HTML string in a component method, and I cannot figure out how to style this HTML code with cloud CSS because it lacks the data attribute to define the scope.

A slightly longer version:

I have a function called highlight that takes a string and returns an HTML string with all occurrences of the search term highlighted, which means the environment <span class="match"> . However, since I do this manually in a row, this range does not receive the special data attribute that CSS with scope in my Vue component should have, so the only way to create these matches is to make my CSS not covered, which I would not want make. Is there a more Vue-specific way for me to do this? The function is as follows:

 // Source: http://stackoverflow.com/a/280805/2874789 function highlight(data, search) { return data.replace( new RegExp("(" + preg_quote(search) + ")", 'gi'), "<span class=match>$1</span>" ); } 

(preg_quote is just a function that avoids things that need to be escaped)

Thanks!

Answer 1

Dynamically Generated Content DOM content created using v-html is not a scope-affected area, but you can still style it using deep selectors.

There seems to be no VueJS way. It seems your best option is to either embed a string in the output of the highlight function, or use a global class.

 function highlight(data, search) { return data.replace( new RegExp("(" + preg_quote(search) + ")", 'gi'), "<span class=match>$1</span>" ); } <style> .match { color: yellow; } </style> 

or

 function highlight(data, search) { return data.replace( new RegExp("(" + preg_quote(search) + ")", 'gi'), "<span style="{ color: yellow }">$1</span>" ); } 

You can also try deep selectors, but I myself am not very familiar with them.

https://vue-loader.vuejs.org/en/features/scoped-css.html

Answer 2

This is an interesting option.

I don’t know how to approach this using scoped styles, but I think we can hack it with an additional <style> element using css modules (which are also limited).

I thought:

 <style scoped> ... </style> <style module> .match { color: red; } </style> 

Then in your replacement function you can:

 `<span class="${this.$style.match}">...</span>` 

You can learn more about vue-loader CSS module support here:

http://vue-loader.vuejs.org/en/features/css-modules.html