javascript - 在for循环丢失索引中使用对话框时出现VUETIFY问题
问题描述
当我在对话框中按下带有对话框开始索引的确认按钮时,我必须调用一个函数。它总是向我发送 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 循环的最后一个索引。
试了一千样东西,从上到下看stackoverflow都找不到,我是自学VUE
解决方案
您应该使用闭包来捕获 的当前值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
}
推荐阅读
- apache-kafka - 在不停止进程的情况下删除 kafka connect 主题
- xml - DomParser - 实体名称必须紧跟实体引用中的“&”
- postgresql - SQL 错误 [22023]:错误:format() 的参数太少其中:执行中的 PL/pgSQL 函数第 12 行
- google-cloud-platform - Google Action - 从一个 Google 帐户迁移到另一个
- winapi - AppCertDLLs 在 GUI 应用程序中不起作用,为什么?
- excel - 带有 INDEX MATCH 参考的 Excel HYPERLINK 无效
- gitlab - 具有特定名称的文件中的 Gitlab CI/CD 配置
- c# - C#:未处理的异常。System.TypeLoadException:无法加载类型“System.Drawing.Color”
- nestjs - nestjs-i18n 阻止了我的本地护照策略
- android - 如何从 Google Drive 上传和下载文件(使用 Rest Api v3)