Vue single file component multiple top level templates

[alexbowers]

What problem does this feature solve?

This will simplify having to put a wrapper around conditional templates.

Consider a table view, that will have a different layout whether there are any rows, or none at all.

<template v-if="results.length == 0">
    <h1>Try running a search?</h1>
</template>

<template v-if="results.length > 0">
    <h1>Search Results Block</h1>
    <pre>{{ results }}</pre>
</template>

Currently, you have to wrap it all in a template, and then a different element within that (say, a div).

This is because a template can cause multiple top level elements to be found.

This has the side effect of putting a div on the page that may not be desired. For example, if results.length == 0 block wanted a different element, id, or class than results.length > 0 this would not be easily readible or necessarily even possible.

The way it works should be that the last template that is found, that evaluates to true, is drawn.

This is currently the case if multiple top level templates are created, just without executing the conditional checks.

What does the proposed API look like?

<template v-if="results.length == 0">
    <h1>Try running a search?</h1>
</template>

<template v-if="results.length > 0">
    <h1>Stock Results Block</h1>
    <pre>{{ results }}</pre>
</template>

<script>
...
</script>

Would draw the Try running a search? on page load, and when results gets populated, it will draw the other template.

[simplesmiler]

You can already do a series of v-if/v-else-if/v-else on the top element in the template to achieve this:

<template>
  <h1 v-if="results.length == 0">Try running a search?</h1>
  <div v-else>
    <h1>Stock Results Block</h1>
    <pre>{{ results }}</pre>
  <div>
</template>

Your exact example will not work for other reason (template can't have multiple root elements, and your second template has h1 and pre on the root level), so I wrapped it in a div.

[yyx990803]

What you are actually asking for is multiple top-level elements for a component. While that's something useful in its own right, currently it requires non-trivial changes to the vdom implementation to support it. This is something that falls within "obviously nice to have but not an area of focus for now".

We'll revisit this when we are working on substantial improvements to the vdom in the future.