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

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

图书馆进行了相同的尝试，并得到了相同的行为。 这里是代码：

<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

道具 位于 v-carousel 上，而不是 v-carousel-item 上。阿拉

<v-carousel cycle>

Answer 2

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

Answer 3

我找到了解决办法。我确实将

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 4

渲染问题，请确保渲染前已获取数据。 用0">包裹起来，养成使用前检查的习惯可以防止很多奇怪的问题。

<div v-if="carouselImages.length > 0">
  <v-carousel>
      <v-carousel-item
        cycle
        v-for="(item,i) in carouselImages"
        :key="i"
        :src="item.url"       
      >
      </v-carousel-item>
  </v-carousel>
</div>