在for循环丢失索引中使用对话框时出现VUETIFY问题答案

【问题标题】：VUETIFY problem when using dialog inside for loop lost index在for循环丢失索引中使用对话框时出现VUETIFY问题
【发布时间】：2026-02-11 14:05:02
【问题描述】：

当我在对话框中按下带有对话框开始索引的确认按钮时，我必须调用一个函数。它总是向我发送 for 循环的最后一个索引，而不是对应的那个

我复制了我引用的部分代码：

<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>

第 57 行：

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

s.key 必须包含启动对话框的索引，但它包含 for 循环的最后一个索引。

我已经尝试了一千种东西，从上到下阅读*我找不到它，我正在自学VUE

【问题讨论】：

您将每个对话框绑定到一个数据，因此它显示了所有内容，但最后一个正在发生我认为 ` v-model="dialogo_add_pr"` 您可以尝试将对话框移动到其他组件。

标签： javascript html vue.js vuetify.js

【解决方案1】：

您应该使用closures 来捕获s.key 的当前值：

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

addpr_seccion(key)
{
  const val = this.pr_ref;
  // do something with the key
}

【讨论】：

问题依然存在，它一直取for循环的最后一个元素，而不是取与我按下按钮并打开对话框的迭代相对应的元素

【解决方案2】：

我终于明白了。将对话框从 for 循环中取出，我创建了一个变量，告诉我最后选择的元素是哪个元素，我从每个元素的按钮中为其赋予值。

【讨论】：