Solo quiero preguntar cómo mostrar/obtener datos de la API en mi cuadro de texto cuando hace clic en el botón de edición en una tabla de fila específica. Mostrará su propia identificación y otros detalles. Lamento mucho publicar mi código de esta manera, no sé cómo hacerlo porque me da errores.
Código sin procesar :
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) }Me dará ese elemento específico, pero cómo hacerlo con un bucle for.
código de muestra :
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; } } }Según tengo entendido, se me ocurrió la siguiente solución. Por favor, hágame saber si funciona según sus requisitos o no.
demostración:
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 } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <ul class="list"> <li v-for="student in students" :key="student.id"> {{ student.name }} <button @click="editStudent(student.id)">Edit</button> </li> </ul> </div>