Vue: показывать сообщения в Instagram через Vue Slick Slider Carousel Component - PullRequest
Новая
       20

Vue: показывать сообщения в Instagram через Vue Slick Slider Carousel Component

0 голосов
/ 05 февраля 2020

Я пытаюсь использовать компонент vue -slick , чтобы показать фид Instagram, поэтому каждый слайд будет постом в Instagram. После нескольких шагов назад и вперед с кодом, который я получил для извлечения всех данных из API Instagram, это работает, но проблема сейчас заключается в том, что компонент Slide рендерится раньше, чем я получаю данные из Instagram, поэтому у меня получилось следующее: узел ползунка HTML пуст и под ним все изображения Instagram после завершения выборки. Я пробовал с наблюдателями и с директивой v-if для компонента " gramPost ", но он не работает.

Это скользящий слайдер Vue, который я использую

Приложение. vue

<template>
  <div id="app">
    <gramPostList/>
  </div>
</template>

<script>
import gramPostList from './components/gramPostList.vue'

export default {
  name: 'app',
  components: {
    gramPostList,
  }
}
</script>

Компонент GramPostList 

 <template>
    <slick
      ref="slick"
      :options="slickOptions"
    >    
        <gramPost class="gramPost" v-for="(gram, index) in grams" v-bind:gram="gram" :key="index"/>    
    </slick>  
</template>
<script>
import axios from "axios";
import Slick from "vue-slick";
import gramPost from "./gramPost"
export default {
    data() {
        return {
            access_token: "the access token",
            url: "https://api.instagram.com/v1/users/self/media/recent/",
            username: "",
            grams: [],
            next_url: "",
            error: false,
            slickOptions: {
                arrows: true,
                appendArrows: ".arrowsContainer",
                infinite: true,
                slidesToShow: 5,
                slidesToScroll: 5,
                slide: ".gramPost",
                nextArrow: "<a class='paginator prevArrow'></a>",
                prevArrow: "<a class='paginator nextArrow'></a>"
            },            
        };
    },
    components: {
        Slick,
        gramPost
    },
    computed: {
        instapage() {
            return 'https://www.instagram.com/' + this.username
        }
    },
    methods: {
        getGrams() {
            axios.get(this.url + "?access_token=" + this.access_token)
                .then(({data}) => {
                    this.grams = data.data
                    this.username = data.data[0].user.username
                    this.next_url = data.pagination.next_url             
                })
                .catch(function (error) {
                // eslint-disable-next-line no-console
                console.log(error)
                this.error = true
                });
        },
        getMoreGrams(){
            axios.get(this.next_url)
                .then(({data}) => {
                this.grams = this.grams.concat(data.data)
                this.next_url = data.pagination.next_url
                })
                .catch(function (error) {
                // eslint-disable-next-line no-console
                console.log(error)
                this.error = true
                });         
        },
        next() {
            this.$refs.slick.next();
        },
        prev() {
            this.$refs.slick.prev();
        },
        reInit() {
            // Helpful if you have to deal with v-for to update dynamic lists
            this.$nextTick(() => {
                this.$refs.slick.reSlick();
            });
        },       
    },
    created() {
        this.getGrams();
    },
};    
</script>

Grampost Компонент: 

<template>
    <img :src="gram.images.standard_resolution.url" alt="Image" />  
</template>
<script>
export default {
    props: ["gram"],
}
</script>
...