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.
Component Templates only render the first element.
See original GitHub issueVue.js version
Both 2.0.2 and 2.0.3
Reproduction Link
https://jsfiddle.net/165g7jz7/
What is Expected?
Should render both “1” and “2”, but only renders “1.”
Fails:
<example inline-template>
<div>1</div>
<div>2</div>
</example>
Works:
<example inline-template>
<div>
<div>1</div>
<div>2</div>
</div>
</example>
What is actually happening?
The component template is only rendering the first element and discarding the rest. It doesn’t matter whether it is inline or not, the result is the same.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:7
- Comments:10 (3 by maintainers)
Top Results From Across the Web
Vue component renders only the first element in the template ...
As you can see, I am trying to render the fb-question-text component if the question.type is of type "text". While the <li> elements...
Read more >Rendering Elements - React
To render a React element, first pass the DOM element to ReactDOM.createRoot() , then pass the React element to root.render() : const root...
Read more >Using templates and slots - Web Components | MDN
This article explains how you can use the <template> and <slot> elements to create a flexible template that can then be used to...
Read more >Render Functions & JSX | Vue.js
Functional components can be registered and consumed just like normal components. If you pass a function as the first argument to h() ,...
Read more >Complete guide to ngFor directive in Angular - InDepth.Dev
This template can include not only regular DOM elements but also Angular components. Take a look on such example when we want to...
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
why you didn’t add this damn information in vue tutorial !?
In 2.0, all templates have to have a single root node.
http://vuejs.org/guide/migration.html#Fragment-Instances-deprecated
You should see some warnings about that in your console, but maybe those don’t show for inline-templates?