VUETIFY problem when using dialog inside for loop lost index

I have to call a function when within the dialog I press the confirm button with the index where the dialog has started. It always sends me the last index of the for loop and not the one that corresponds

I copy the part of the code to which I refer:

<ul v-for="s in sortedArray" :key="s.key" >

          {{s.key}}
          <v-col cols="12">
            <v-card
                width="900"
                color=#ECF0F1
            >
              <v-row>
                <v-col cols="12">
                  <v-card-title><b>{{s.nombre}}</b></v-card-title>

                </v-col>


              </v-row>
            <v-card-actions>

                <v-row justify="center">
                  <v-col cols="12" >
                    <v-row justify="center">
                      <v-dialog v-model="dialogo_add_pr"
                                persistent
                                :retain-focus="false"
                                max-width="600px">
                        <template v-slot:activator="{on,attrs}">
                          <v-btn  dark color="green" v-bind="attrs" v-on="on" >
                            <v-icon>mdi-plus</v-icon>

                          </v-btn>
                        </template>
                        <v-card>
                          <v-card-title>
                            <span class="text-h5">Añadir producto a seccion</span>
                          </v-card-title>
                          <v-card-text>
                            {{s.key}}
                              <v-row>
                                <v-col cols="12">
                                  <v-select
                                      :items="productos"
                                      :item-text="'nombre'"
                                      :item-value="'key'"
                                      v-model="pr_ref"
                                      :menu-props="{ top: true, offsetY: true }"
                                      label="Producto"
                                  ></v-select>

                                </v-col>
                              </v-row>
                          </v-card-text>
                          <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn text @click="cancela2" color="red">
                              Cancelar
                            </v-btn>
                            <v-btn text color="green" @click="addpr_seccion(pr_ref, s.key)" >
                              Añadir
                            </v-btn>
                          </v-card-actions>
                        </v-card>

                      </v-dialog>
                    </v-row>

                  </v-col>
                  <v-col cols="8"></v-col>
                  <v-col col="2">

                    <v-btn dark color="red" @click="eliminar_seccion(s.key)">
                      Eliminar
                    </v-btn>

                  </v-col>
                  <v-col col="2">
                    <v-btn dark color="blue" @click="editar_seccion(s.key)">
                      Editar
                    </v-btn>
                  </v-col>
                </v-row>

              </v-card-actions>

            </v-card>
            </v-col>

        </ul>

On line 57:

    <v-btn text color="green" @click="addpr_seccion(pr_ref, s.key)" >
                                  Añadir
                                </v-btn>

s.key must contain the index from where the dialog was launched, but it contains the last index of the for loop.

I have tried a thousand things and read stackoverflow from top to bottom and I can’t find it, I’m learning VUE on my own

Answer

I was finally able to figure it out. Take the dialog out of the for loop, I have created a variable that tells me which element is the last selected, to which I give value from the button of each element.