Question

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

我的问题是，为什么第一个computed为空白？其次为什么它不开始？

这是我的组件代码：

v-carousel-item

这是我的vuex商店模块代码：

<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();

  }
}

我尝试研究类似的问题，但未发现任何问题。我可能必须手动启动轮播吗？或为什么在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

Answer 1

我不确定这是否可以解决整个问题，但是不确定cycle道具goes on the v-carousel，而不是v型轮播项目。阿拉<v-carousel cycle>

Answer 2

我找到了解决方案。我确实将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 3

我刚从Firestore中提取网址并在轮播中显示图片时遇到了同样的问题。我将图像加载到组件本身而不是商店中，但是我使用了v-model，直到querySnapshot完成后才加载图像。它在第二张图像上开始播放，并稍有延迟，但它会自动开始播放，似乎可以正常工作。

带有vuex异步计算图像的Vuetify v-carousel无法正常工作

更新

3 个答案: