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

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

      }

    }
  }
}

How to use vue async data to display number of views instead {} ?


vue.js vuejs2 html-framework-7
person hyphens2    schedule 22.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Есть лучший способ — создание собственного компонента для каждого элемента. Затем вызов 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>
person ittus    schedule 22.02.2019
comment
Вы спасли мой день !! - person hyphens2; 22.02.2019