Returning value from ajax in vuejs - php

Question

Im trying to pass an integer (id) to a function which calls an api. The api then checks if the id passed matches any data in the database and returns the name associated with the id. I'm using vue.js for this along side laravel. Below is my code.
<tr v-for="store in storeList" :key="store.id">
<td>{{ getNodeName(store.store_name) }}</td>
</tr>
getNodeName(nodeId)
{
axios.get('api/store/getNodeName/'+nodeId).then(function (response){
return response.data[0].name;
});
}
Now the question is how do I get the result to print inside the td tag. apparently return from ajax doesnt work and I tried pushing it all to an array and printing it again but it didnt work either.
thanks

Answer 1

Assuming your API works, the first thing you are doing wrong is that you are returning from the callback when the Promise is resolved and not from the getNodeName method.
One simple way to achieve what you want, is to loop through your storeList (assuming it's a prop) inside the mounted lifecycle hook (using arrow functions here)
...
<tr v-for="node in nodes" :key="node.id">
<td>{{ node.name }}</td>
</tr>
...
data() {
return {
nodes: []
};
},
mounted() {
this.storeList.forEach(store => this.getNodeName(store.store_name));
},
methods: {
getNodeName(nodeId) {
axios.get('api/store/getNodeName/' + nodeId)
.then(response => this.nodes.push({ id: nodeId, name: response.data[0].name }))
}
}
...
You probably also want to turn this into one API call if possible, since you are making storeList.length calls.

Answer 2

You can make a loop of storelist and get nodeId from there and then do the API calls.
<tr v-for="store in storeData" :key="store.id">
<td>{{store.name}} </td>
</tr>
data(){
return{
storeData : []
};
},
created(){
for(var i=0; i<this.storeList.length; i++){
axios.get('api/store/getNodeName/' + this.storeList[i].store_name)
.then(response => this.storeData.push({ id: this.storeList[i].store_name,
name: response.data[0].name
}))
}
}