How to resolve '[Vue warn]: Multiple root nodes returned' error

How to solve the "[Vue warn]: Multiple root nodes returned" error

When using Vue.js to develop web applications, you often encounter various All kinds of errors. One of the common errors is "[Vue warn]: Multiple root nodes returned". This error usually occurs when using Vue's template syntax, indicating that multiple root nodes are returned in a component.

In Vue, a root node refers to the content directly wrapped in a tag in a component template. For example, in the template of a Vue component, there can usually only be one root node, as shown below:

However, sometimes we accidentally return multiple root nodes in the template, causing Vue to throw "[Vue warn]: Multiple root nodes returned" error. This situation usually occurs in the following situations:

1. Multiple root-level elements are used in the template:

2. are used in the template Vue's conditional rendering or loop rendering instructions resulted in the generation of multiple elements:

3. The use of Vue's slots in the template resulted in the generation of multiple elements:

No matter what the situation is, when multiple root nodes are returned in the template, Vue will throw a "[Vue warn]: Multiple root nodes returned" error.

In order to solve this error, we need to ensure that there is only one root node in the template. Here are several common solutions:

1. Use