This is the logic algorithm I'm converting and it's not working.

Popup.vue

<script>
import '../../assets/style.css'
export default {
data(){
  return{
    ceos: [{name_ceo:"Mr. A",
            position_ceo:"CEO-GOSTREAM",
            content:"Lorem."},
            {name_ceo:"Mr. B",
            position_ceo:"CTO-GOSTREAM",
            content:"Lorem2."},
            {name_ceo:"Mr. C",
            position_ceo:"CGO-GOSTREAM",
            content:"Lorem3."},
        ]
  }
  
},

methods:{
  
  modalCeo(i){
    var modal = this.$refs.modal;
    modal[0].style.display="flex";
    ceos.forEach(element => {
        name_ceo1.innerHTML=ceos[i].name_ceo;
        position.innerHTML=ceos[i].position_ceo;
        content.innerHTML=ceos[i].content;
    });
    
},
closemodal(){
  var modal = this.$refs.modal;
    modal[0].style.display="none";
}

}
}
</script>

<style>

</style>

My theme:

<template>
    <div >
    <div ref="modal" >
      <div >
        <div >
          <img src="../../assets/close.svg" id="btn-close-modal" type="button" @click="closemodal()">
        </div>
        <div  v-for="(detail, index) in ceos" :key="index">
          <h3 id="name"></h3>
          <h5 id="position"></h5>
          <h6 id="intro-ceo"></h6>
        </div>
        <img  src="../../assets/Group 226.png" alt="">
      </div>
    </div>
    <div >
      <h5>Đội ngũ GoStream</h5>
      <h2>Co-Founders</h2>
    </div>
    <div >
      <img  src="../../assets/building-0122.png" alt="">
      <div >
        <img src="../../assets/Profile1.png" @click="modalCeo(0)">

        <img src="../../assets//Profile2.png" alt="" @click="modalCeo(1)">

        <img src="../../assets/Profile3.png" alt="" @click="modalCeo(2)">

      </div>
    </div>
  </div>
</template>

I want when I click it, a pop up will appear showing the values ​​I have given. Can you guys give me a solution to this problem?

<div  v-for="(item, index) in images" :key="index" >
        <img :src="item.url" @click="modalCeo(index)">
      </div>

Script:

images:[
          {url: '../../assets/Profile1.png'},
          {url: '../../assets/Profile2.png'},
          {url: '../../assets/Profile3.png'},
        ]

Update on the code I worked on but it still can't render the image.

CodePudding user response：

You can simply achieve it by using Vue Modal component.

Demo :

new Vue({
  el: '#app',
  data: {
    showModal: false,
    selectedCeo: [],
    ceos: [
      {name_ceo:"Mr. A",
       position_ceo:"CEO-GOSTREAM",
       content:"Lorem."},
      {name_ceo:"Mr. B",
       position_ceo:"CTO-GOSTREAM",
       content:"Lorem2."},
      {name_ceo:"Mr. C",
       position_ceo:"CGO-GOSTREAM",
       content:"Lorem3."}
    ]
  },
  methods: {
    modalCeo(index) {
        this.showModal = true;
        this.selectedCeo = this.ceos[index];
    }
  }
});

.modal-vue .overlay {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}

.modal-vue .modal {
  position: relative;
  width: 300px;
  z-index: 9999;
  margin: 0 auto;
  padding: 20px 30px;
  background-color: #fff;
}

.modal-vue .close{
  position: absolute;
  top: 10px;
  right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- app -->
<div id="app" >

  <!-- button show -->
  <button v-for="(item, index) in ceos" :key="index" @click="modalCeo(index)">{{ item.name_ceo }}</button>

  <!-- overlay -->
  <div  v-if="showModal" @click="showModal = false"></div>

  <!-- modal -->
  <div  v-if="showModal">
    <button  @click="showModal = false">x</button>
      <p>Name : {{ selectedCeo.name_ceo }}</p>
      <p>Position : {{ selectedCeo.position_ceo }}</p>
      <p>Content : {{ selectedCeo.content }}</p>
  </div>

</div>

Note : I updated code snippet as per your comment. Instead of the profile pictures I used buttons just for the demo.