Как сделать так, чтобы форма выводилась между строками таблицы?

Question

[ekzotika]

Как сделать так, чтобы форма при нажатии определенной кнопки выводилась между строками таблицы (1 раз)?

<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)" выводилась форма <customer-edit-form/>. Но если ставлю, как сейчас, то она выводится столько раз, сколько у меня сейчас for соответственно. Как сделать так, чтобы она выводилась один раз, под той строкой, куда я её поставила?

Answer 1

[fallus]

Как вариант, можно так.

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

и <tr v-if="isModalCustomerVisible && idx === 0">
(или прям на <customer-edit-form /> повесить доп. условие idx === 0. В зависимости от того, нужно ли всю <tr> убирать или только <customer-edit-form />)

* на сколько помню, третий параметр в цикле — номер текущей итерации типо, вроде. Если так, то всё будет работать.

Comments

[ekzotika]

fallus, спасибо большое за это решение! Теперь ближе к тому, как нужно, но теперь форма выводится именно под первой строкой. То есть нажимаю ли на 5, 10, или 20 строке на кнопку, которая открывает форму, и она открывается под первой, а должна под той, на которой я кнопку нажала...

[fallus]

ekzotika, тогда стоит забить на то, что я написал выше.

В data стоит завести какой-нибудь state.
Например:

data(){
  return {
    currentRow: -1
  }
}

Когда происходит клик

@click="showModalToEdit(item.id, item.address, item.email, item.site, item.customer, item.distributor, item.state)"

В методе showModalToEdit нужно добавить это:

this.currentRow = id // это item.id, который передаётся в метод

А <tr> с формой показывать по этому условию:

<tr v-if="isModalCustomerVisible && currentRow === item.id">

spoiler

Ну и стоит «очищать» state в методе, который должен скрывать форму(не знаю какой именно):
this.currentRow = -1

Как-то так.

[ekzotika]

fallus,

<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>
                    <tr v-if="isModalCustomerOfficeVisible && currentRow === item.id">
                        <td colspan="8"><modal v-if="isModalCustomerOfficeVisible" @close="isModalCustomerOfficeVisible = false">
                            <h3 slot="header">{% verbatim %}{{ header }}{% endverbatim %}</h3>
                            <div slot="body" class="body-modal-address">
                                <div class="body-modal-address__div1">
                                    <h4>Address</h4>

                                    <h5>Sub_locality</h5>
                                    <input type="text" v-model="currentSubLocality"/>

                                    <h5>Postal_code</h5>
                                    <input type="text" v-model="currentPostalCode"/>

                                    <h5>Street_address</h5>
                                    <input type="text" v-model="currentStreetAddress"/>
                                </div>
                                <div class="body-modal-address__div2">
                                    <h5>House</h5>
                                    <input type="text" v-model="currentHouse"/>

                                    <h5>Note</h5>
                                    <input type="text" v-model="currentNote"/>

                                    <h5>Raw_data</h5>
                                    <input type="text" v-model="currentRawData"/>
                                </div>
                            </div>
                            <div slot="body" class="body-modal-others">
                                <div class="body-modal-others__div1">
                                     <h4>Email</h4>
                                    <input type="email" v-model="currentEmail"/>
                                    <h4>Site</h4>
                                    <input type="text" v-model="currentSite"/>
                                </div>
                                <div class="body-modal-others__div2">

                                    <h4 class="little-margin">State</h4>
                                    <v-select class="vue-selectors" v-model="inputStateValue" :value="currentState" @input="changeState" :options="statesNames"></v-select>

                                    <h4 class="little-margin">Locality</h4>
                                    <v-select class="vue-selectors" v-model="inputLocalityValue" :value="currentLocality" @input="changeLocality" :options="localitiesNames"></v-select>

                                    <h4 class="little-margin">Distributor</h4>
                                    <v-select class="vue-selectors" v-model="inputDistributorValue" :value="currentDistributor" @input="changeDistributor" :options="distributorsNames"></v-select>

                                </div>
                            </div>

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

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

                                <button class="footer-modal-buttons__cancel" @click="closeModal">
                                                Отменить
                                </button>
                            </div>
                        </modal></td>
                    </tr>

Вот так мне пишет ошибку, что "item" не определен. Будто for закончился после закрытия <tr v-for="item in items">

[fallus]

ekzotika, ну да, так и есть. item нету в области видимости формы.

Тогда добавить всё-таки индекс:

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

По клику его передавать:

@click="showModalToEdit(item.id, item.address, item.email, item.site, item.customer, item.distributor, item.state, idx)"

И в showModalToEdit записывать:
this.currentRow = idx

А условие показа формы такое:

<tr v-if="isModalCustomerVisible && currentRow === idx">

Без наглядного примера \ песочницы сложно.

[ekzotika]

fallus, огромное Вам спасибо, очень помогли!!!