This is my example:
<template>
<div v-for="id of SomethingChanging">
{{ getSomethingAsync(id) }}
</div>
</template>
<script>
export default {
...
methods:{
async getSomethingAsync(id){
try {
const result = await getSomethingAPI(id)
return result.payload
} catch (e) {
console.log(e)
}
}
}
}
</script>
All we know, async function will return a promising object ...
How can I fix it so that the page will return the truly data?
Don't try to call methods inside template to render something, because this could give some issues like infinite rendering, instead of that you can define a data property that you can fill it inside the created hook like :
<template>
<div v-for="item in result">
{{ item }}
</div>
</template>
<script>
export default {
...
data() {
return {
result: []
}
},
methods: {
async getSomethingAsync(id) {
try {
const result = await axios.get('https://jsonplaceholder.typicode.com/todos/' + id)
return result.data
} catch (e) {
console.log(e)
}
}
},
async created() {
this.result = await Promise.all([...Array(5)].map((_, i) => {
return this.getSomethingAsync(i + 1)
}))
}
</script>
Example
// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
result: []
}
},
methods: {
async getSomethingAsync(id) {
try {
const result = await axios.get('https://jsonplaceholder.typicode.com/todos/' + id)
return result.data
} catch (e) {
console.log(e)
}
}
},
async created() {
this.result = await Promise.all([...Array(5)].map((_, i) => {
return this.getSomethingAsync(i + 1)
}))
}
})<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-axios.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in result">
{{ item.title }}
</li>
</ul>
</div>
</body>
</html>
id in 5looks like bogus code. It's unclear why you couldn't fetch data on mount.async setup(...)and the value would be available at the time when a template is rendered