search

Home  >  Q&A  >  body text

How to display specific rows in Vue.js API

I just want to ask how to display/get data from API to my textbox When you click the edit button in a specific row table. It will display its own ID and other details. I'm sorry for posting my code like this, I don't know what to do because it gives me errors.

Original code:

data : {
  students : []
}
methods: {
  async editStudents(edit) {
    let id = "621ecc95817b5aeb5783aebe"
    let a = await 
    this.$axios.get(`https://api.qa.sampleapi.com/students/${id}`)
    console.log(a.data.data)
}

It will give me the specific item but how to do it using for loop.

Sample code:

editStudent(edit) {
  let studentid = id
  let a = await 
  this.$axios.get(`https://api.qa.sampleapi.com/students/${studentid}`)
  for(let i = 0; i < this.students.length; i++) {
    if(edit.studentid === this.students[i].studentid) {
      this.textbox1 = this.students[i].studentid;
    }
  }
}

P粉014293738P粉014293738271 days ago583

reply all(1)I'll reply

  • P粉489081732

    P粉4890817322024-03-30 12:47:25

    Based on my understanding, I came up with the following solution. Please tell me if it meets your requirements.

    Demo:

    new Vue({
      el:"#app",
      data:{
        students: [{
            id: 1,
          name: 'Student 1'
        }, {
            id: 2,
          name: 'Student 2'    
        }, {
            id: 3,
          name: 'Student 3'   
        }]
      },
      methods: {
        editStudent(id) {
            console.log(id); // You will get the student ID here
        }
      }
    });
    sssccc
    
    • {{ student.name }}

    reply
    0
  • Cancelreply