Toggle single dynamic element with v-show

Question

Hello and thanks in advance, since I can't get any of the solutions, I found online, to work with my projekt.

I have a vue-component, which fetches Data dynamically from a json File via v-for. I managed to toggle div-visibility on all elements at once.

I need to find a way, to toggle div-visibility only on the element, where the click is. Also, only the clicked button should change it's text.

I know, it must work with v-bind, but I tried numerous solutions (v-if, v-show, hide css class, v-on) in the past three days.

            <div v-for="r of resultQuery" :key="r.id">
           <div class="list-data">
              <div class="list-data-wrap">
                 <div class="ld">{{ r.customers_name }}</div>
                 <div class="ld">{{ r.customers_street_address }} / {{ r.customers_street_number }}</div>
                 <div class="ld">{{ r.customers_postcode }} / {{ r.customers_city }}</div>

                 <div class="ld">
                    <button @click="value1 = !value1">

                       <span v-if="value1" class="swap list-data-collapse">
                       <i class="material-icons">&#xe5cd;</i></span>
                       <span v-if="!value1" class="swap list-data-collapse">
                       <i class="material-icons">&#xE313;</i></span>
                    </button>

                 </div>


              </div>
           </div>

           <div class="list-data">
              <div class="list-data-wrap">
                 <div v-show="value1">
                    <div class="ld">{{ r.customers_name }}</div>
                    <div class="ld">{{ r.customers_street_address }} / {{ r.customers_street_number }}</div>
                    <div class="ld">{{ r.customers_postcode }} / {{ r.customers_city }}</div>
                 </div>
              </div>
           </div>
        </div>