Vue.js: Loading template (or div) when user clicks button?

Question

So I currently have a template sitting in a ".vue" file like so:

<template>
  <div id="dataAttachToMe"></div>
</template>

I don't want this to load, unless a user clicks a button, something like

<button @click="loadTheTemplateAbove">See Data</button>

I've tried using this example:https://v2.vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key. But it says something like "Component template should contain exactly one root element" in the error message.

I need more than a show/hide here I think, something that can initiate the template dynamically.

<template>
  <div id="data">
    <button @click="loadTemplate">Load the template</button>
    <div v-if="buttonClicked">
      <div id="dataAttachedToThisDiv"></div>
    </div>
  </div>
</template>

aBiscuit · Accepted Answer · 2018-10-25 21:20:29Z

2

The error you are getting, means that there is more than one root element inside <template></template> tag.

It is required in Vue.js (and other template based frameworks/libraries) to have only one root element.

This will NOT work:

<template>
  <div id="dataAttachToMe"></div>
  <button @click="loadTheTemplateAbove">See Data</button>
</template>

This will work:

<template>
  <div id="someRootDiv">
    <div id="dataAttachToMe">Some data</div>
    <button @click="loadTheTemplateAbove">See Data</button>
  </div>
</template>

Here is a code example (App.vue) of what you are trying to achieve:

Basic idea: we have to create a variable, that will be changed upon button click. We add v-if directive that depends on that variable and will handle element's visibility.

answered Oct 25, 2018 at 21:20

aBiscuit

4,7621 gold badge21 silver badges30 bronze badges

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

6 Comments

Michael Teller Over a year ago

Hi @aBiscuit - thanks for the awesome example. The only issue I'm running into is that for some reason my " <div id="dataAttachToMe"></div>" won't initialize if wrapped in another div element, if it sits inside a template div by itself, it loads fine though. How do I initialize it so that it "stands alone" if possible?

aBiscuit Over a year ago

Could you, please, clarify "won't initialize" statement? It does not appear in the DOM? Are there still any errors in console?

Michael Teller Over a year ago

Hi aBiscuit - good question - the div itself appears in the DOM onclick, but doesn't initialize the data attached to the div/id (so the screen is white, but if you inspect element in the browser, you can see the div). However, it it was just that div inside the template tags, it would initialize the data as well. I updated the code example above to show you what I mean: the "dataAttachedToThisDiv" isn't initializig properly for some reason.

aBiscuit Over a year ago

I can see you've updated the question. So I've updated the CodeSandbox link :) Note dynamic message variable inside the div. If element with v-if directive is present in DOM, all that is left is to add some content inside the element. Note, that id attribute is generally redundant in Vue.js, at least, from personal experience.

Michael Teller Over a year ago

Hi aBiscuit, what if I want the "message" to output html and not just a string? (and thanks!)

|

tony19 · Accepted Answer · 2022-07-16 04:57:10Z

Welcome to StackOverflow. When you get the error Component template should contain exactly one root element it means that you can only have one root element in your template. You can fix that error by wrapping everything in a blank div like so

 <template>
  <div>
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address">
    </template>
  </div>
</template>

Please edit your post and place you <script> tag. Conditional Rendering requires a data field of a boolean that you can place in your if statement on your template

<template>
 <div>
    <div v-if="show">{{message}}</div>
    <div v-if="@show">Not Showing when show is set to false</div>
     <button v-on:click="show = true">Show</button>
 </div>
</template>
<script>
module.exports {
  data: function () {
    message: 'Hello Vue!',
    show: false
  }
}
</script>

Collectives™ on Stack Overflow

Vue.js: Loading template (or div) when user clicks button?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related