0👍
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.
0👍
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
}))
}
}
- [Vuejs]-How to use BigQuery API in Vue.js
- [Vuejs]-Node.js/Express: Pass routes/ let other routes than root handle by the Single page application
Source:stackexchange.com