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

Question

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

我的问题是为什么第一个 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>

Answer 1

我不确定这是否会解决整个问题，但 cycle 道具 goes on the v-carousel，而不是 v-carousel-item。阿拉<v-carousel cycle>

Answer 2

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

Answer 3

我找到了解决方案。我确实将 v-carousel 包装在 v-layout 中，并添加了 v-if 并加载了新的计算值。

这样它会等到它为真，然后再显示它。 Carousel 行为现在是正常的。我是新来的，所以如果有办法正确更新它，请告诉我。

组件：

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