[Framework7 Vuejs] Привязка асинхронных данных к шаблону с помощью v-for - PullRequest
Новая
       22

[Framework7 Vuejs] Привязка асинхронных данных к шаблону с помощью v-for

0 голосов
/ 22 февраля 2019

Я хочу отобразить общее количество просмотров для каждого идентификатора (1, 2, 3) по вызову api use 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 asyncданные для отображения количества просмотров вместо {} ?

1 Ответ

0 голосов
/ 22 февраля 2019

Есть лучший способ, который заключается в создании пользовательского компонента для каждого элемента.Затем вызовите 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>
...