Method opens all modals of v-for elements

Question

Method opens all modals of v-for elements

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

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 my listaProjetosModelos you have 100 items, and when I click on Editar to edit a specific item, it opens all 100 modals, instead of just that particular item in my table . What I do not understand is why this is happening. Any solution for this?

Running example: link

javascript vue.js

asked by anonymous 23.11.2018 / 17:52

2 answers

An object's data is null after reading from a CSV Distribution of components in GroupLayout

score 2 · 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><divid="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>

In this way it is possible for several manners to be opened at the same time.

score 0 · Answer 2

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

link