Multiple list Component calls

Question

I have a basic user list with 4 columns (NAME | EMAIL | PHONE | OPTIONS).

In the column options, for each record of the table I have an edit and remove button. I would like each edit button to trigger another Component (Edit-user-modal-Component) by passing a prop (ID).

The idea is that when the Component (Edit-user-modal-Component) is called, it makes a query to bring the user’s complete data through the received prop and display the data in the respective modal fields.

Example of what I’m looking for:

<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>

Somebody help me with this?

Answer 1

I imagine that modal can only open once, to avoid having N open dialogs. The solution I suggest is to have the component outside the loop and a v-if to open if there is an assigned ID in the object data of the component.

An example of implementation would be:

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>