Hide html elements in vuejs2

Question

I want to hide html elements during the initial load, by clicking a button or link i will show those html elements. I can't find a solution to hide or show the element in vuejs2 version. I can able to see few options in vuejs but i am not sure how to use those methods. Below is my component code in that i want to hide the html element(id) "Message".

<template>
  <div class="row">
        <div class="col-lg-12">
            <label class="checkbox checkbox-inline no_indent">
                <input type="checkbox" value="">Show stats
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel-group">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">List Values</h3>
                    </div>
                    <div class="panel-body">
                        <button type="button" id="btn1" class="btn btn-warning btn-md" v-on:click="showWorkflow">Test 1</button>
                        <button type="button" id="btn2" class="btn btn-danger btn-md" v-on:click="showWorkflow">Test 2</button>
                        <button type="button" id="btn3" class="btn btn-info btn-md" v-on:click="showWorkflow">Test 3</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
      <div id="Message">Hello i am here</div>
    </div>
</template>
<script>
  export default {
      name: 'jobs',
      methods: {
          showWorkflow: function (e) {
            console.log(e.target.id)
          }
     }
 }
</script>

Answer 1

In Vue, you use the v-if directive to conditionally render elements.

You could also use the v-show directive if you wanted to just toggle the CSS display property.

See the section in the docs on Conditional Rendering for more info.

---

In your specific case, make showWorkflow a data property initially set to false.

Use this as the argument for a v-if directive on the content that you want to initially hide.

Then, when you want to show the content, set showWorkflow to true:

new Vue({
  el: '#app',
  data() {
    return {
      showWorkflow: false,
    }
  },
})

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

<div id="app">
  <div v-if="showWorkflow">
    Here is the workflow
  </div>

  <button @click="showWorkflow = true">Show Workflow</button>
</div>

Here is the documentation on conditional rendering in Vue