So zeigen Sie bestimmte Zeilen in der Vue.js-API an

Question

Ich möchte nur fragen, wie ich Daten von der API in meinem Textfeld anzeigen/abrufen kann Wenn Sie in einer bestimmten Zeilentabelle auf die Schaltfläche „Bearbeiten“ klicken. Es werden seine eigene ID und andere Details angezeigt. Es tut mir leid, dass ich meinen Code so gepostet habe. Ich weiß nicht, was ich tun soll, weil es mir Fehler gibt.

Originalcode:

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

Es wird mir das spezifische Element angezeigt, aber wie mache ich es mit der for-Schleife?

Beispielcode:

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

Answer 1

根据我的理解，我想出了以下解决方案。请告诉我它是否符合您的要求。

演示：

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

  

    

      {{ student.name }}
      Edit