[Vuejs]-Modal component in VueJS

by

1👍

Check out conditional rendering, specifically v-if. This would only load the modal if the button is clicked for example.

https://v2.vuejs.org/v2/guide/conditional.html#v-if

Single page component:

<template>
  <div>
    <div
      v-if="showModal"
      class="modal">
      Stuff
    </div>
    <button @click="toggleModal">
      Toggle Modal
    </button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        showModal: false
      }
    },
    methods: {
      toggleModal() {
        this.showModal = !this.showModal
      }
    },
  }
</script>

Leave a comment