Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
v-html not working for slot
See original GitHub issueVersion
2.6.10
Reproduction link
https://jsfiddle.net/mo476zhg/
Steps to reproduce
- Create a component with a
slot. - Use
v-htmlon the slot to provide default content - Attempt to use component without providing slot content
- Observe that
v-htmlis ignored on the slot
What is expected?
v-html should output to the slot when no default slot value is provided
What is actually happening?
v-html is ignored and the slot is empty
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
javascript - Injecting html - using slot or v-html? - Stack Overflow
I've tried using slots (it works), but it isn't really dynamic. I'm wondering if I missed something that would allow the slot to...
Read more >V-html in slots - Get Help - Vue Forum
The problem is, when a slot is being replaced with content, it's aways as a regular <p> - and to output unescaped HTML,...
Read more >Using Vue.js slots to pass HTML content to components
Learn how using Vue.js slots can be an efficient solution for passing down template code from one component to another.
Read more >HTML In V-Slot Not Rendering As HTML - Quasar forum
The code I'm using does have v-slots, which is why I thought the code would render similar to using v-html. Here is my...
Read more >How I finally got my head around Scoped Slots in Vue
It took a while for me to understand how Slots worked so when I did, I thought it'd ... I find it helps...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Don’t open issues providing fake repros
v-html changes the element innerHTML property, so it won’t work on a slot
Yes, as @posva pointed out, v-html behaves as javascript’s innerHTML, it replaces the complete content of your component, instead of the slot alone. Instead, send the content as a string prop to your child element and use it wherever in your child element container as a v-html directive. Hope it helps.