Vuex 비동기식 계산 이미지가 제대로 작동하지 않는 v-carouzl을 사용하여 Vuetify

Vuex 비동기식 계산 이미지가 제대로 작동하지 않는 v-carouzl을 사용하여 Vuetify

이미지 로드를 시도한다.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>

이렇게 해서 전체 문제가 해결될지는 모르겠지만, 문제는.cycle소품은 v-carouzel이 아니라 v-carouzel로 간다.알라<v-carousel cycle>

파이어스토어에서 url을 뽑고 carouzel에 이미지를 표시하는 것과 같은 문제에 부딪혔어.스토어가 아닌 구성 요소 자체에 이미지를 로드하고 있지만 querySnapshot이 완료될 때까지 v-model을 사용하여 이미지를 로드하지 않았다.두 번째 이미지에서 시작하고 약간의 지연이 있지만 자동으로 시작되고 잘 작동하는 것 같다.

해결책을 찾았어.나는 그 일을 끝냈다.v-carousel의v-layout그리고 a를 추가했다.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
}

참조URL: https://stackoverflow.com/questions/52748150/vuetify-v-carousel-with-vuex-async-computed-images-not-working-properly