Cara untuk memaparkan baris tertentu dalam API Vue.js

Question

Saya hanya ingin bertanya bagaimana untuk memaparkan/mendapatkan data daripada API ke kotak teks saya Apabila anda mengklik butang edit dalam jadual baris tertentu. Ia akan memaparkan ID sendiri dan butiran lain. Saya minta maaf kerana menyiarkan kod saya seperti ini, saya tidak tahu apa yang perlu dilakukan kerana ia memberi saya ralat.

Kod asal:

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

Ia akan memberi saya item khusus tetapi bagaimana untuk melakukannya menggunakan gelung.

Contoh kod:

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

Berdasarkan pemahaman saya, saya menghasilkan penyelesaian berikut. Sila beritahu saya jika ia memenuhi keperluan anda.

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