Multiple component calls in list

Navigation
3

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

In the options column, for each table record 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.

The idea is that when the component (edit-user-modal-component) is called, it makes a query to bring the complete user 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>

Does anyone help me with this?

    
asked by anonymous 21.06.2018 / 16:30

1 answer

0

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

An example 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>
    
22.06.2018 / 00:21
sqlsrv_num_rows does not work ActionListener does not identify the retrieved button