With Vuejs, how to use a modal component inside a v-for loop the right way

Question

In my vue.js app, I need to display a list of items which the user can click.

When clicked, each of these items should then fire a modal, containing additional informati

Answer 1

These two links helped me figure this out:

• https://vuejs.org/v2/examples/modal.html

• https://laracasts.com/discuss/channels/vue/passing-data-form-v-for-loop-to-modal-component

#In your Parent Component You don't have to create a modal for each item within the v-for loop, simply include the modal-component at the beginning of your parent and then work with v-if="..." and props.

and then in your script:

import modal from './Modal'

export default {
  components: {
    modal
  },
  data() {
    return {
      modalVisible: false,
      modalData: null
    }
  },
  methods: {
    openModal(data) {
      this.modalData = data
      this.modalVisible = true
    },
  }

#In your child (modal) component In your modal you can now do the following:

Template:

Script

Hope that helps :-)