How to render an element conditionally in Vue.js?

Question

I'm new to Vue.js, I just read the documentation on conditional rendering here (https://v2.vuejs.org/v2/guide/conditional.html) but somehow can't get it to work...

My code:

<button onclick="showTemplate()">Teste</button>


<template v-if="app">

    <div id="app">
      {{ message }}
    </div>

</template>

function showTemplate(){
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
}

I want the template tag to render only after app has been instantiated. I have also tried variations of this code without success. Can someone help out?

I'm using CDN.. <script src="unpkg.com/vue"></script> does the code differ from both? — sigmaxf
– sigmaxf, Commented Jul 6, 2017 at 14:34
Yeah, if you are starting to learn vue.js, much better you do the best practice. — Jrey
– Jrey, Commented Jul 6, 2017 at 14:47
One minor comment: you are using v-if on the template tag, which is outside of the div which is having the Vue instance actually mounted to it. So I believe that that <template> tag will never have access to that Vue function, even after the Vue instance is created. — Nathan Wailes
– Nathan Wailes, Commented Jul 6, 2017 at 14:49

tony19 · Accepted Answer · 2022-07-16 00:02:25Z

2

Use v-cloak. The intended use of v-cloak is to hide the Vue until it is instantiated.

function showTemplate() {
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
}

[v-cloak] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<button onclick="showTemplate()">Teste</button>

<div id="app" v-cloak>
  {{ message }}
</div>

Here is how you might hide your "loading" screen when data is retrieved. In this case, the button will serve as our loading screen.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    loaded: false
  },
  methods: {
    getData() {
      setTimeout(() => this.loaded = true, 2000)
    }
  }
})

[v-cloak] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>

<div id="app" v-cloak>
  <button v-if="!loaded" @click="getData">Get Data</button>

  <div v-if="loaded">
    {{ message }}
  </div>
</div>

edited Jul 16, 2022 at 0:02

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 6, 2017 at 14:43

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

2 Comments

sigmaxf Over a year ago

This is good, but how do I do the opposite? If I want to hide my "loading" screen after I fetch data from my API and create the vue object?

Bert Over a year ago

@raphadko That is not quite the question you asked. However, there are a number of ways to do that. One, you could have the loading screen controlled by Vue, show the loading screen when the page is loaded and hide it when data is returned using the conditional rendering techniques you read about. If, for some reason, your loading screen is outside Vue, you could still hide it from Vue code once data is retrieved.

Jrey · Accepted Answer · 2017-07-06 14:37:12Z

0

Try this and remove the button. You don't need to call the instance within the function.

// put it on your index.html
<div id="app">
  {{ message }}
</div>

// put it on your script make sure that you have already a CDN of vuejs.
var app = new Vue({
   el: '#app',
   data: {
      message: 'Hello Vue!'
   }
})

answered Jul 6, 2017 at 14:37

Jrey

1,6382 gold badges17 silver badges34 bronze badges

2 Comments

sigmaxf Over a year ago

well, I don't want to load 'app' right away, but to the click of a button.. and I dont want to display the raw tag {{message}} on my page before I click the button.

Jrey Over a year ago

@raphadko you want to display that message when you click the button? Am I correct?

Collectives™ on Stack Overflow

How to render an element conditionally in Vue.js?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related