I'd like to show a modal-ponent after an "on click"-Event is triggered. Is it possible to show a ponent using a method call? Or what is the best practice in this case?

My use case is as follows:

I have multiple cards, which contain several information about something. When the user clicks on one card a modal-ponent should pop up and show more details about this card.

<div class="card" @click="showDetails()">
<h3 class="header">{{ Name }} {{ Type }}</h3>
<div class="container">
  some Information<br>
  more Information<br>
</div>



export default {
  props: {
    job: Object
  },
  ponents: {
  },
  methods: {
    showDetails() {

    }
  },
  name: "card"
};
</script>

I'd like to show a modal-ponent after an "on click"-Event is triggered. Is it possible to show a ponent using a method call? Or what is the best practice in this case?

My use case is as follows:

I have multiple cards, which contain several information about something. When the user clicks on one card a modal-ponent should pop up and show more details about this card.

<div class="card" @click="showDetails()">
<h3 class="header">{{ Name }} {{ Type }}</h3>
<div class="container">
  some Information<br>
  more Information<br>
</div>



export default {
  props: {
    job: Object
  },
  ponents: {
  },
  methods: {
    showDetails() {

    }
  },
  name: "card"
};
</script>

• javascript
• vue.js

• 2 please share the relevant parts of your code – Boussadjra Brahim Commented Aug 19, 2020 at 15:04
• after @click a method call is required. I don't know how to open a ponent from a method call. Do you know? – DisDes Commented Aug 19, 2020 at 15:09
• 1 it will be easier to help you if you can share your code or a fiddle or sandbox. – Jonathan Akwetey Okine Commented Aug 19, 2020 at 15:13
• @DisDes, Are you willing to use vue bootstrap? – Sowmyadhar Gourishetty Commented Aug 19, 2020 at 17:40

4 Answers 4

For example. Create modal with your ponent inside (i use bootstrap-vue)

 <b-modal ref="my-ponent" >
     <your-ponent></your-ponent>
 </b-modal>

And add event to @click method

this.$refs.my-ponent.show();

Usually you want to use a Bool to control whether a modal is visible or not. Simply use @click (v-on:click) to toggle Bool.

In Data:

modal: false

Then on a button:

<button @click="modal = !modal">Click me to toggle modal</button>

Edit: Forgot to add logic on modal:

<modal v-model="modal"></modal>

The v-model simply means that it doesn't show if it's false and it does if it's true.

More info: https://v2.vuejs/v2/api/#v-model

I hope this is sufficient.

Piece of advice: Next time give a better explanation with more code. Otherwise it will bee guesswork for everyone who wants to answer.

The question seem to have an extra logic, since you have multiple cards with different items, you want to open a modal with a single item info each time, and probably you don't want to create N modals for all the records displayer in cards.

As the previous answers state, you CAN open a modal by calling a method, and also you can open a modal replacing a variable value that allows it, but also you need to close the modal and that is an extra logic you must have in mind.

you can have an event directive as you have here, and also your modal code (ponent most of the times):

<div class="card" @click="showDetails()">

<my-modal-ponent v-show="openModal" >
   <my-card-information-ponent />
</my-modal-ponent>

on your script you must declare the property that will trigger the moday display and the method to mutate the property

export default {
    data(){
        return {
           showModal:false
        }
    },
    methods:{
       showDetails(){
           this.showModal = true;
       }
    }
}

to close the modal you have multiple options, you can add a button to the ponent, click the modal backdrop, etc. But to achieve this you need to emit an event from the child ponent to the parent ponent that will update the showModal property back to false and will close the modal.

Here is what worked for me.

Please note, my answer is in Vue3 as of Feb 17, 2022

<script setup>
  // set a boolean ref value as false. we will be using the openModal function to trigger its change
  let showModal = ref(false);

  // create the openModal function and set showModal to true
  const openModal = () => {
    showModal.value = true;
    // console.log(showModal);
  };
</script>  

<template>
  // Here is our modal. It will only display on the page once we click the button that triggers the openModal function
    <Modal v-if="showModal" />
  
  // Here is the button that triggers the openModal function, changing the showModal boolean value to true
    <button v-on:click="reply" type="button">Reply</button>
</template>