[Framework7 Vuejs]Binding asyn data to template with v-for - vue.js

Question

I want to display total views for each id (1, 2, 3) by call api use axios like this:
<f7-block>
<f7-col
:key="index"
v-for="(items, index) in list">
Total views: {{countView(items.id)}}
</f7-col>
export default {
data(){
list: [];
// list = [{id: 1}, {id: 2}, {id: 3}]
},
methods(){
async countView(id){
let url = 'xxx';
let filter = {
where: {
quizId: id
}
}
try{
let res = await axios.get(url, filter);
return res.data.countViews;
} catch(error) {
}
}
}
}
How to use vue async data to display number of views instead {} ?

Answer 1

There is a better way, which is creating a custom component for each item. Then calling countView inside each custom component:
TotalView.vue
<template>
<span v-if="count !== null">
{{ count }}
</span>
</template>
<script>
export default {
name: 'TotalView'
props: ['itemId'],
data: () => ({
count: null
}),
created() {
this.countView(this.itemId)
},
methods: {
async countView(id){
let url = 'xxx';
let filter = {
where: {
quizId: id
}
}
try{
let res = await axios.get(url, filter);
this.count = res.data.countViews
} catch(error) {
}
}
}
}
</script>
and use that in your component:
<f7-block>
<f7-col
:key="index"
v-for="(items, index) in list">
Total views: <total-view :itemId="items.id" />
</f7-col>