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?

Answer 1

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>

Answer 2

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!'
   }
})