vue.js - Vuetify v-carousel 与 vuex 异步计算图像无法正常工作

问题描述

我尝试在组件中的属性上加载firestore图像并循环Vuex。图像在那里，但幻灯片的第一张图像是空白的。如果我启动轮播，则会显示正确的第二张图像，并且从那里可以正常工作。v-forcomputed

我的问题是为什么第一个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并得到了相同的行为。这里的代码：

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

标签： vue.jsvuejs2google-cloud-firestorevuexvuetify.js

vue.js - Vuetify v-carousel 与 vuex 异步计算图像无法正常工作

问题描述

更新

解决方案

推荐阅读