[Framework7 Vue Js]使用v-for将异步数据绑定到模板

Question

我想通过调用 api 显示每个 id (1, 2, 3) 的总视图，使用 axios 如下：

<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) {

      }

    }
  }
}

如何使用 vue 异步数据来代替显示视图数量 {} ？

Answer 1

有一种更好的方法，即为每个项目创建一个自定义组件。然后在每个自定义组件中调用countView：

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>

并在你的组件中使用它：

<f7-block>
<f7-col 
  :key="index" 
  v-for="(items, index) in list">
  Total views: <total-view :itemId="items.id" />
</f7-col>