How to use components in v-html

by

Pretty sure Vuejs makes it very hard to directly use external html. v-html will simply replace the html content and therefore will not execute any directive. The purpose of it is to avoid XSS attacks as documented here: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.

If you really need to use external html, it is possible to use Vue.compile() documented here: https://v2.vuejs.org/v2/api/#Vue-compile

A working example can be found here: https://jsfiddle.net/Linusborg/1zdzu7k1/
and its related discussion can be found here: https://forum.vuejs.org/t/vue-compile-what-is-staticrenderfns-render-vs-staticrenderfns/3950/7

More Related Contents:

  1. vuejs update parent data from child component
  2. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  3. Detect click outside element
  4. Why does Prettier not format code in VS Code?
  5. Vuex state on page refresh
  6. Vuejs and Vue.set(), update array
  7. How to watch store values from vuex?
  8. Display unescaped HTML in Vue.js
  9. Vue.js get selected option on @change
  10. NavigationDuplicated Navigating to current location (“/search”) is not allowed
  11. How to listen for ‘props’ changes
  12. Accessing Vuex state when defining Vue-Router routes
  13. Vue JS: Difference of data() { return {} } vs data:() => ({ })
  14. Vue.js: Conditional class style binding
  15. Running an Express server middleware alongside Nuxt
  16. How can I get query parameters from a URL in Vue.js?
  17. VueJS How can I use computed property with v-for
  18. Call a Vue.js component method from outside the component
  19. How to access to a child method from the parent in vue.js
  20. How to set up flexible grid in Vue Material
  21. How can I bind the html content in vuejs?
  22. How to update the document ID in firebase firestore? [duplicate]
  23. Vue 3 reactivity not triggered from inside a class instance
  24. Passing props with programmatic navigation Vue.js
  25. VueJs templating. How to load external templates
  26. Vue.js – update router view
  27. Vue.js data-bind style backgroundImage not working
  28. Importing javascript file for use within vue component
  29. Vue.js unknown custom element
  30. How to navigate using vue router from Vuex actions

Leave a Comment