Hidden Popup

The Popup enables you to control its visibility.

To show or hide the Popup, use the show property.

<style>
  .popup-content {
    padding: 30px;
    color: #787878;
    background-color: #fcf7f8;
    border: 1px solid rgba(0,0,0,.05);
  }
</style>
<div id="vueapp" class="vue-app">
    <div>
        <button
            class="k-button"
            @click="onClick"
            ref="button"
        >
            {{buttonText}}
        </button>
        <Popup
            :anchor="'button'"
            :show="show"
            :popup-class="'popup-content'"
        >
            Popup content.
        </Popup>
    </div>
</div>
import { Popup } from '@progress/kendo-vue-popup';
Vue.component('Popup', Popup);

new Vue({
    el: '#vueapp',
    data: function(){
        return {
            show: false
        };
    },
    computed: {
        buttonText: function(){
            return this.show ? 'Hide' : 'Show';
        }
    },
    mounted(){
        this.show= true;
    },
    methods: {
         onClick () {
            this.show = !this.show;
        }
    }
});

In this article