Get data id in array object vuejs

Question

how to display value data based on index array. here I make a modal edit data, I have a json like the following

[
    {
        "ID": 3,
        "idusers": 3,
        "skills": "Go",
        "profiency": "Expert",
    },
    {
        "ID": 48,
        "skills": "laravel",
        "profiency": "laravel",
    },
    {
        "ID": 47,
        "skills": "Vue",
        "profiency": "Expert",
    }
]

table data that I display

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

and this my modal edit

 <v-dialog v-model="skillForm" width="500">
        <v-container>
            <v-text-field outlined dense>
                {{profiency}}
            </v-text-field>
        </v-container>
</v-dialog>

my method

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)
    },
  }
}

the question is how to display data based on ID, when I click the edit button it appears and enters the text field form

you should have passed skill as 1st parameter instead of item. v-on:click="handleEdit(skill,index)" — kusiaga
– kusiaga, Commented Feb 2, 2021 at 4:33

BeaST 30 · Accepted Answer · 2021-02-02 06:30:48Z

1

Pass skill from your method as a parameter @click="handleEdit(skill,index)
Then declare a variable, currentObject, and then equate it this.currentObject = skill inside the method.
Then you can access currentObject.id via the v-model binded to your text field.

answered Feb 2, 2021 at 6:30

BeaST 30

7441 gold badge11 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get data id in array object vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related