How to make if in for stop after the first time in Vue?

Question

Vue.js

<ul v-for="(items, customer, idx) in grouped()" class="user-list">
          <li class="item-distributor"><h4 class="row-filial__h">{% verbatim %}{{ customer }}{% endverbatim %}</h4></li>
          <li v-if="isModalCustomerVisible && currentRow === idx">
                                   .........
          </li>
            <li v-if="isModalCustomerOfficeNewVisible && currentRow === idx">
                                    ..................
            </li>
            <li v-for="(item, idxx) in items" class="item-distributor">
            <div class="cols">
              <div class="company">
                <div class="block">
                  <div class="name">{% verbatim %}{{ item.address.locality.name }}{% endverbatim %}</div>
                  <div class="sub-name">City</div>
                </div>
                <div class="block">
                    <div class="name" v-if="item.address.sub_locality">{% verbatim %}{{ item.address.sub_locality }}, {{ item.address.raw_data }}{% endverbatim %}</div>
                    <div class="name" v-if="!item.address.sub_locality">{% verbatim %}{{ item.address.raw_data }}{% endverbatim %}</div>
                    <div class="sub-name">Address</div>
                </div>
              </div>
              <div class="city">
                <div class="block">
                  <div class="name"><p v-for="obj in item.profile">{% verbatim %}{{obj.name}}{% endverbatim %}</p></div>
                  <div class="sub-name">Specialization</div>
                </div>

                <div class="block">
                  <div class="name"><p v-for="obj in item.trade_marks">{% verbatim %}{{obj.name}}{% endverbatim %}</p></div>
                  <div class="sub-name">Trade Marks</div>
                </div>

              </div>
              <div class="sap_code">
                <div class="block">
                  <div class="name"><p v-for="obj in item.specialization">{% verbatim %}{{obj.name}}{% endverbatim %}</p></div>
                  <div class="sub-name">Commodity Groups</div>
                </div>
                <div class="block">
                  <div class="name">{% verbatim %}{{item.distributor.name}}{% endverbatim %}</div>
                  <div class="sub-name">Distributor</div>
                </div>
              </div>


              <div class="sap_code" style="margin-left: 20px;">
                <div class="block">
                  <div class="name" v-if="item.head_office === true"><v-checkbox v-model="checkboxTrue" disabled></v-checkbox></div>
                  <div class="name" v-if="item.head_office === false"><v-checkbox v-model="checkboxFalse" disabled></v-checkbox></div>
                  <div class="sub-name">Head Office</div>
                </div>
                <div class="block">
                  <div class="name">{% verbatim %}{{item.state.name}}{% endverbatim %}</div>
                  <div class="sub-name">State</div>
                </div>
              </div>


              <div class="last">
                <div class="bal" style="margin-left: 20px;">
                  <div class="block">
                    <div class="name">
                      <p v-for="obj in item.tel">{% verbatim %}{{obj.number}}{% endverbatim %}</p>
                    </div>
                    <div class="sub-name">Tel</div>
                  </div>
                  <div class="block">
                    <div class="name" v-if="item.email !== 'nan'">
                      {% verbatim %}{{item.email}}{% endverbatim %}
                    </div>
                    <div class="name" v-if="item.email === 'nan'">
                    </div>
                    <div class="sub-name">Email</div>
                  </div>

                  <div class="block">
                    <div class="name">
                        {% verbatim %}{{item.site}}{% endverbatim %}
                    </div>
                    <div class="sub-name">Site</div>
                  </div>
                </div>

                <div class="icons">
                  <div class="block block-date-create">
                    <div class="block-date-create__container">
                        <div class="name" style="margin-right: 17px"><a @click="showModalToEdit(item.id, item.address, item.email, item.site, item.customer, item.distributor, item.state, idxx, item.profile, item.specialization, item.trade_marks, item.tel, item.head_office)"><span class="iconify" data-icon="ion-create-outline" data-inline="false"></span></a></div>
                    </div>
                    <div class="block-date-create__container">
                        <div class="name"><a @click="deleteCustomerOffice(item.id)"><span class="iconify" data-icon="ion:trash" data-inline="false"></span></a></div>
                    </div>
                  </div>

                </div>

              </div>
            </div>
            <ul><li v-if="isModalCustomerOfficeVisible && currentRow2 === idxx">
                                    .........
                                </li></ul>
          </li>

        </ul>

The data in grouped() is represented like this:

customer: {массив с данными, привязанными к этому customer},
                 {массив с данными, привязанными к этому customer},
                 {массив с данными, привязанными к этому customer};
customer: {массив с данными, привязанными к этому customer},
                 {массив с данными, привязанными к этому customer};
customer: {массив с данными, привязанными к этому customer},
                 {массив с данными, привязанными к этому customer};

etc.;

I need that when the button is clicked

<ul><li v-if="isModalCustomerOfficeVisible && currentRow2 === idxx">
                                    .........
                                </li></ul>

opened under the line on which I press this button. It works only halfway, because it opens under the required line, but it also opens in the next cycle.
For example:

customer: {массив с данными, привязанными к этому customer},
                 {массив с данными, привязанными к этому customer}, [нажала здесь]
                 [должно открыться только здесь, здесь и открывается]
                 {массив с данными, привязанными к этому customer};
customer: {массив с данными, привязанными к этому customer},
                 {массив с данными, привязанными к этому customer};
                 [открывается также здесь, тоже под второй строкой]
customer: {массив с данными, привязанными к этому customer},
                 {массив с данными, привязанными к этому customer},
                 [и здесь, тоже под второй]
                 {массив с данными, привязанными к этому customer};

How can I make it ifwork foronly once?

Answer 1

if () {
retirn;
}

Why not use a while loop?