3

Possuo uma lista de usuários básica com 4 colunas (NOME | EMAIL | TELEFONE | OPÇOES).

Na coluna opções, para cada registro da tabela possuo um botão de editar e remover. Gostaria de que cada botão de editar acionasse um outro component (edit-user-modal-component) passando uma prop (ID).

A ideia é que quando o component (edit-user-modal-component) for chamado, ele faça uma consulta para trazer os dados completos do usuário através da prop recebida e exiba os dados nos respectivos campos do modal.

Exemplo do que estou buscando:

<table>
  <thead>
    <th>Nome</th>
    <th>E-mail</th>
    <th>Telefone(s)</th>
    <th>Opções</th>
  </thead>
  <tbody>
    <tr v-for="user in users" :key="user.id">
        <td>Fulano de Tal</td>
        <td>[email protected]</td>
        <td>(10) 54564564654</td>
        <td>
            <edit-user-modal-component :id="{{ user.id }}"></edit-user-modal-component>
        </td>
    </tr>
  </tbody>
</table>

Alguém me ajuda nessa?

1 Resposta 1

0

Imagino que esse modal só possa abrir uma vez, para evitar ter N dialogos abertos. A solução que sugiro é teres o componente fora do loop e um v-if para abrir se houver uma ID atribuída no objeto data do componente.

Um exemplo de implementação seria:

new Vue({
  data() {
    return {
      editing: false,
    }
  }
});
<div>
  <table>
    <thead>
      <th>Nome</th>
      <th>E-mail</th>
      <th>Telefone(s)</th>
      <th>Opções</th>
    </thead>
    <tbody>
      <tr v-for="user in users" :key="user.id">
        <td>Fulano de Tal</td>
        <td>[email protected]</td>
        <td>(10) 54564564654</td>
        <td @click="editing = user.id">Editar</td>
      </tr>
    </tbody>
  </table>
  <edit-user-modal-component v-if="editing" :id="editing"></edit-user-modal-component>
</div>
1
  • 1
    Perfeito. Não havia tentado essa abordagem mas funcionou!
    – Edson
    Commented 22/06/2018 às 16:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .