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

Question

当我在对话框中按下带有对话框开始索引的确认按钮时，我必须调用一个函数。它总是向我发送 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 循环的最后一个索引。

我试了一千个东西，把Whosebug从头到尾翻了一遍也没找到，我在自学VUE

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

Answer 2

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

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

VUETIFY problem when using dialog inside for loop lost index

html

javascript

vue.js

vuetify.js