arrays - 获取数组对象vuejs中的数据id
问题描述
如何基于索引数组显示值数据。这里我做了一个模态编辑数据,我有一个像下面这样的json
[
{
"ID": 3,
"idusers": 3,
"skills": "Go",
"profiency": "Expert",
},
{
"ID": 48,
"skills": "laravel",
"profiency": "laravel",
},
{
"ID": 47,
"skills": "Vue",
"profiency": "Expert",
}
]
我显示的表格数据
<tr v-for="(skill, index) in getSkills" :key="skill.ID">
<td>{{ index + 1 }}</td>
<td>{{ skill.skills }}</td>
<td>{{ skill.profiency }}</td>
<td class="text-xs-center">
<td><div v-if="editBtn == true">
<v-btn class="mr-3" x-small fab v-on:click="handleEdit(item,index)" color="primary"><v-icon>mdi-cancel</v-icon></v-btn>
</td>
</tr>
这是我的模态编辑
<v-dialog v-model="skillForm" width="500">
<v-container>
<v-text-field outlined dense>
{{profiency}}
</v-text-field>
</v-container>
</v-dialog>
我的方法
export default {
name: "Skills",
data: function() {
return {
formAddSkills: "",
skillForm: false,
editBtn: "",
skills: {
skills: "",
profiency: "",
},
};
},
computed: {
...mapState({ getSkills: (state) => state.resume.Skills }),
dataSkills() {
return this.skills;
},
},
methods: {
handleEdit(item, index) {
this.skillForm = true;
this.editBtn = true;
this.profiency = item.profiency
// console.log(item)
console.log(index)
},
}
}
问题是如何根据 ID 显示数据,当我单击编辑按钮时,它会出现并输入文本字段表单
解决方案
- 将方法中的技能作为参数传递
@click="handleEdit(skill,index)
- 然后声明一个变量,
currentObject
,然后this.currentObject = skill
在方法中将其等同起来。 - 然后您可以通过绑定到您的文本字段的 v-model 访问 currentObject.id。
推荐阅读
- r - 如果在一个人输入样本之前允许 NA,我如何删除包含 NA 的行?
- python - 构建 RealSense Python 包装器时出现 CMake 错误:无法为目标“PRIVATE”指定源
- sql - Zero not returning in DB2 when select query yields no result
- image - 如何在 QML 中按降序显示 GridView 中的图像?
- ggplot2 - ggplot2单个条形图图例不出现
- python - 为什么我的打印语句会产生“SyntaxError: invalid syntax”?
- html - 部署后 CSS 样式未显示在 GitHub 上
- postgresql - Python2.7 pyodbc - 内容以 unicode 而不是 utf-8 编码
- apache-spark - 创建一片 DStream 窗口
- javascript - Fancybox 在 Safari 上很难看到