Vuetify v-carousel с асинхронными изображениями vuex async не работает должным образом

Question

Я пытаюсь загрузить изображения свыше firestore в Vuex и выполнить цикл с v-for над свойством computed в компоненте.Изображения есть, но там первое изображение слайда пустое.Если я запускаю карусель, появляется правильное второе изображение, и оттуда оно работает нормально.

Мой вопрос: почему первое v-carousel-item пустое?и второе, почему он не запускается?

Вот мой код для компонента:

<template>
  <v-container app fluid>

    <p>home</p>
    <v-carousel>
      <v-carousel-item
        cycle
        v-for="(item,i) in carouselImages"
        :key="i"
        :src="item.url"       
      >
      </v-carousel-item>
    </v-carousel>
  </v-container>
</template>

<script>

import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions, mapGetters } = createNamespacedHelpers('carousel')

export default {
  name: 'app',

  methods: {
    ...mapActions([
      'getCarouselImages'
    ])
  },
  computed : {
    ...mapGetters({
      carouselImages: 'loadedCarouselImages'
    })
  },

  created(){
    console.log("created");
    this.getCarouselImages();

  }
}

вот мой код модуля хранилища vuex:

import Vue from 'vue'
import Vuex from 'vuex'
import firestore from '../../firebase/firestore'

Vue.use(Vuex)


const state = {
  carouselImages: []
}

const mutations = {
  setImages(state, payload){
    state.carouselImages.push(payload);
  }
}

const actions = {
  getCarouselImages: ({ commit }) => {
    firestore.collection("Carousel").get()
      .then(querySnapshot => {
        querySnapshot.forEach(image => {
          commit('setImages',image.data());
        })
      })
      .catch(error => {
        console.log(error);
      })
  }
}

const getters = {
  loadedCarouselImages: state => {
    return state.carouselImages.sort((imageA, imageB)=>{
      return imageA.pos < imageB.pos
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

Я пытаюсьисследовать подобную проблему, но я не нашел что-то.Возможно, мне придется запустить карусель вручную?Или почему он не запускается, даже если состояние правильно изменяется в хуке created.А также все работает отлично, как только я нажимаю на нее вручную.

Спасибо, ребята, за вашу помощь.

С уважением

Дани

Обновление

Я тоже попробовал то же самое с VueFire Libary и получил то же самое поведение.Вот код:

<template>
  <v-carousel cycle>
    <v-carousel-item
      v-for="(item,i) in items"
      :key="i"
      :src="item.url"
      >
    </v-carousel-item>
  </v-carousel>

</template>

<script>
import { db } from "../firebase/firestore";


export default {
  name: 'Carousel',
  props: {
    msg: String
  },
  data(){
    return{
      items: []
    }
  },
  firestore(){
    return{
      items: db.collection('Carousel')
    }
    console.log(this.items);
  },
  created(){
    console.log(this.items);
  }
}
</script>

Answer 1

Я нашел решение.Я обернул v-carousel в v-layout и добавил v-if с новой загрузкой вычисленного значения.

Таким образом, он ждет своего истина и затем показывает его.Поведение Карусели теперь нормально.Я новичок здесь, поэтому, если есть способ обновить его правильно, пожалуйста, сообщите мне.

Компонент:

<template>
  <v-layout v-if="!loading">
    <v-carousel cycle>
      <v-carousel-item
        v-for="(item,i) in carouselImages"
        :key="i"
        v-bind:src="item.url"
        >
      </v-carousel-item>
    </v-carousel>
  </v-layout>
</template>

<script>
  import { db } from "../firebase/firestore";
  import { createNamespacedHelpers } from 'vuex'
  const { mapState, mapActions, mapGetters } = createNamespacedHelpers('carousel')

  export default {
    name: 'Carousel',

    methods: {
      ...mapActions([
        'getCarouselImages'
      ])
    },
    computed : {
      ...mapGetters({
        carouselImages: 'loadedCarouselImages',
        loading: 'loading'
      })
    },
    created(){
      this.getCarouselImages();
    }
  }
</script>

Магазин:

import Vue from 'vue'
import Vuex from 'vuex'
import { db } from "../../firebase/firestore";

Vue.use(Vuex)

const state = {
  loading: true,
  carouselImages: []
}

const mutations = {
  setImages(state, payload){
    state.carouselImages.push(payload);
  },
  setLoading (state, payload) {
    state.loading = payload
  }
}

const actions = {
  getCarouselImages: ({ commit }) => {
    commit('setLoading', true);
    db.collection("Carousel").get()
      .then(querySnapshot => {
        querySnapshot.forEach(image => {
          commit('setImages',image.data());
          commit('setLoading', false);
        })
      })
      .catch(error => {
        console.log(error);
      })
  }
}

const getters = {
  loadedCarouselImages: state => {
    return state.carouselImages.sort((imageA, imageB)=>{
      return imageA.pos < imageB.pos
    })
  },
  loading: state => {
    return state.loading
  },
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

надеюсь, это поможетдругие люди в этой функции.

Answer 2

Я только что столкнулся с той же проблемой, когда извлекал URL из Firestore и отображал изображения в карусели.Я загружаю изображения в сам компонент, а не в хранилище, но я использовал v-модель, чтобы не загружать изображения до завершения querySnapshot.Он запускается на втором изображении и имеет небольшую задержку, но запускается автоматически и, кажется, работает нормально.

Answer 3

Я не уверен, что это решит всю проблему, но cycle prop идет на v-carousel , а не на v-carousel-item.Ала <v-carousel cycle>