Method opens all modals of the v-for elements

Question

I have the following code snippet:

<template v-for="(item, index) in listaProjetosModelos">
     <tr :key="index">
          <td class="text-center">
               {{item.nome_projeto}}
          </td>
          <td class="text-center">
               {{item.departamento}}
          </td>
          <td class="text-center">
               {{item.total_tarefas}}
          </td>
          <td class="text-center text-nowrap">
              <span class="mr-2" @click="show()">Editar</span>
              <span class="mr-2" @click="show()">Excluir</span>
              <span @click="show()">Detalhes</span>

              <!--- MODAL FORM Editar ProjetoModelo -->
              <template>
               <modal name="hello-world">
                    <div class="col-md-12">
                           <h2>Editar</h2>
                    </div>
               </modal>
              </template>
           </td>
      </tr>
</template>

And the method:

 show() {
        this.$modal.show('hello-world', {
            title: 'Editar Projeto Modelo'
        });
    },

What happens is that if in mine listaProjetosModelos have 100 items, and when I click on Editar to edit a specific item, it opens all 100 modals, rather than just that specific item in my table. What I don’t understand is why this is happening. Some solution to this?

Example running: https://jsfiddle.net/au12Ley0/

Answer 1

One solution is to create a field within the object to control whether the modal is open or not.

new Vue({
  el: "#app",
  data: () => ({
    modalOpen: false,
    listaProjetosModelos: [{
        departamento: "Contabilidade",
        nome_projeto: "Nome doido",
        total_tarefas: 0,
        modal: false
      },
      {
        departamento: "Tecnologia",
        nome_projeto: "Tecnologia WOW",
        total_tarefas: 1,
        modal: false
      },
    ]
  }),
  methods: {
    abrirModal(index) {
      this.listaProjetosModelos[index].modal = !this.listaProjetosModelos[index].modal
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
#app td{
  border: 1px solid;
}

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <h2>Todos:</h2>
  <template v-for="(item, index) in listaProjetosModelos">
    <tr :key="index">
      <td class="text-center">
        {{item.nome_projeto}}
      </td>
      <td class="text-center">
        {{item.departamento}}
      </td>
      <td class="text-center">
        {{item.total_tarefas}}
      </td>
      <td class="text-center text-nowrap">
        <span class="mr-2" @click="abrirModal(index)">Editar</span>
        <span class="mr-2" @click="abrirModal(index)">Excluir</span>
        <span @click="abrirModal(index)">Detalhes</span>
        <!--- MODAL FORM Editar ProjetoModelo -->
        <template v-if="item.modal">
          <modal name="hello-world">
            <div class="col-md-12">
              <h1>MODAL ABERTA</h1>
            </div>
          </modal>
        </template>
      </td>
    </tr>
  </template>
</div>

This way it is possible that several modals are opened at the same time.

Answer 2

I solved the problem as follows, guys: My modal, before it was inside the v-for, so I put it outside, and created a method that takes the parameter of the item, which populates the information within this modal.

https://jsfiddle.net/au12Ley0/15/#