How to make the form appear between the rows of the table?

Question

Vue.js

How to make the form so that when a certain button is pressed, it is displayed between the rows of the table (1 time)?

<table class="table" ref="table">
                <thead>
                    <tr>
                        <th>City</th>
                        <th>Address</th>
                        <th>Distributor</th>
                        <th>Email</th>
                        <th>Site</th>
                        <th>State</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>

                <tbody class="s" v-for="(items, customer) in grouped()">
                    <tr>
                        <td colspan="8" class="row-filial"><h4 class="row-filial__h">{% verbatim %}{{ customer }}{% endverbatim %}</h4><button class="btn-default row-filial__button" @click="showModalToNew(customer)"><i class="ion-plus"></i>Новый филиал</button><a @click="showModalToEditCustomer(customer)"><span class="row-filial__edit iconify" data-icon="ion-create-outline" data-inline="false"></span></a>
                                <a @click="deleteCustomer(customer)"><span class="iconify" data-icon="ion:trash" data-inline="false"></span></a></td>
                    </tr>
                    <tr v-if="isModalCustomerVisible">
                        <td colspan="8"><customer-edit-form v-if="isModalCustomerVisible" @close="isModalCustomerVisible = false">
                            <h3 slot="header">{% verbatim %}{{ header }}{% endverbatim %}</h3>

                                    <h4 slot="body">Sap</h4>
                                    <input slot="body" type="text" v-model="currentSapCustomer"/>

                                    <h4 slot="body">Sap_be</h4>
                                    <input slot="body" type="text" v-model="currentSapBeCustomer"/>

                                    <h4 slot="body">Name</h4>
                                    <input slot="body" type="text" v-model="currentNameCustomer"/>

                                    <h4 slot="body">Name_en</h4>
                                    <input slot="body" type="text" v-model="currentNameEnCustomer"/>

                            <div slot="footer" class="footer-modal-buttons">
                                <button class="footer-modal-buttons" v-if="header === 'New Customer'" @click="insertCustomer">
                                                OK
                                </button>

                                <button class="footer-modal-buttons" v-if="header === 'Edit Customer'" @click="editCustomer">
                                                OK
                                </button>

                                <button class="footer-modal-buttons__cancel" @click="closeModal">
                                                Отменить
                                </button>
                            </div>
                        </customer-edit-form></td>
                </tr>
                    <tr v-for="item in items">
                                <!--<td>{% verbatim %}{{ item.id }}{% endverbatim %}</td>-->
                                <td> {% verbatim %}{{ item.address.locality.name }}{% endverbatim %}</td>
                                <td v-if="item.address.sub_locality"> {% verbatim %}{{ item.address.sub_locality }}, {{ item.address.raw_data }}{% endverbatim %}</td>
                                <td v-if="!item.address.sub_locality">{% verbatim %}{{ item.address.raw_data }}{% endverbatim %}</td>
                                <td>{% verbatim %}{{item.distributor.name}}{% endverbatim %}</td>
                                <td v-if="item.email !== 'nan'">{% verbatim %}{{item.email}}{% endverbatim %}</td>
                                <td v-if="item.email == 'nan'"></td>
                                <td>{% verbatim %}{{item.site}}{% endverbatim %}</td>
                                <td>{% verbatim %}{{item.state.name}}{% endverbatim %}</td>
                                <td><a @click="showModalToEdit(item.id, item.address, item.email, item.site, item.customer, item.distributor, item.state)"><span class="iconify" data-icon="ion-create-outline" data-inline="false"></span></a></td>
                                <td><a @click="deleteCustomerOffice(item.id)"><span class="iconify" data-icon="ion:trash" data-inline="false"></span></a></td>
                    </tr>
                </tbody>
        </table>

@click="showModalToEditCustomer(customer)"I want to display a form when I click on <customer-edit-form/>. But if I set it as it is now, then it is displayed as many times as I have now, forrespectively. How can I make it appear once, under the line where I put it?

Answer 1

Alternatively, you can.

<tbody class="s" v-for="(items, customer, idx) in grouped()">

and (or directly hang an additional condition . Depending on whether you need to remove everything or only ) * As far as I remember, the third parameter in the loop is the number of the current iteration, like, sort of. If so, then everything will work. <tr v-if="isModalCustomerVisible && idx === 0">