How to conditional render vue.js on template tag?

Question

I'm studying vue.js through reference document on Vue.js Reference Doc.

and then, i'm following up example. but, conditional part example dosen't work.

this is my code.

<template id="app-3">
<div v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>
</template>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el : '#app-3',
        data : {
            ok : true
        }
    });
</script>

and this code is work.

    <transition id="app-3">
    <template v-if="ok">
        <div>
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </div>
    </template>
</transition>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el : '#app-3',
        data : {
            ok : true
        }
    });
</script>

i want to know first code why doesn't work!

iam still new to vue too, but i thinnk you cannot use template. the first needs to be a div or so. template is for Vue.component({}) — Paulquappe
– Paulquappe, Commented May 12, 2018 at 11:12

Vamsi Krishna · Accepted Answer · 2018-05-12 11:44:22Z

2

@xyiii pointed the error that is displayed in the console.

As you commented on @xyiii answer:

hmm so, Vue.js Doc example is wrong code?

Nope. They are just explaining the case where you want to toggle multiple elements depending on same property.

So instead of doing it like this:

Title Paragraph 1

Paragraph 2

You can group them in a template tag and do it like this:

<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>

<template> tag is just like a placeholder. It will not be rendered on to the DOM.

So you can have two root elements by mistake as:

<template v-if="ok">
    <div>Root element 1</div>
    <div>Root element 2</div>
</template>

So to prevent this vue throws an error.

To know why only one root element checkout @LinusBorg's comment here.

answered May 12, 2018 at 11:44

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xyiii · Accepted Answer · 2018-05-12 11:18:54Z

1

By the debugging console:

Cannot use <template> as component root element because it may contain multiple nodes.

You basically need a root element and since a template tag can contain multiple elements, you are not allowed to use that as root element in vue.

Instead, use a div and your re-written example works:

<div id="app-3">
  <div v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </div>
</div>

answered May 12, 2018 at 11:18

xyiii

1123 bronze badges

3 Comments

Liquid.Bear Over a year ago

hmm so, Vue.js Doc example is wrong code? Then, as using template tag on root element, should i use it like @Paulquappe? or use transition tag. It's right?

xyiii Over a year ago

Vamsi Krishna explained it pretty good. The important note to make here is that the template tag is not parsed by the DOM, so it's just an invisible layer. Just make sure you only have one root instance which is the entry point. This makes sense because a vue component can't have 2 entry points.

Liquid.Bear Over a year ago

I understood perfectly. Thank you.!!

Collectives™ on Stack Overflow

How to conditional render vue.js on template tag?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related