I just want to ask how to display/fetch data from API to my textbox when you click the edit button in a specific row table. It will display it's own id and other details. I'm so sorry to post my code like this, I don't know how to do it because it gives me errors.
Raw 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 that specific item but how to do it with a 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;
}
}
}
As per my understanding I came up with below solution. Please let me know if it works as per your requirement or not.
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
}
}
});<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>