获取数组对象vuejs中的数据id

Posted 2023-02-22

【中文标题】获取数组对象vuejs中的数据id

【英文标题】：Get data id in array object vuejs

【发布时间】：2021-05-06 05:52:51

【问题描述】：

如何根据索引数组显示数值数据。这里我做了一个模态编辑数据，我有一个像下面这样的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" >
        <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 显示数据，当我单击编辑按钮时，它会出现并进入文本字段表单

【问题讨论】：

您应该将skill 作为第一个参数而不是item 传递。 v-on:click="handleEdit(skill,index)"

【参考方案1】：

将方法中的技能作为参数传递 @click="handleEdit(skill,index) 然后声明一个变量currentObject，然后在方法内部将其等同于this.currentObject = skill。 然后您可以通过绑定到您的文本字段的 v-model 访问 currentObject.id。