I am trying to display a loader spinner while an image is loading, but I am having trouble implementing this.
Even after debugging and getting true and false values in the console, the spinner is still not showing up.
<template>
<div class="KingOfMountain">
<Spinner v-if="isLoading"/> //// ERROR
<div v-else class="container">
<div v-if="!isEndGameKing" class="choices">
<p id="score">{{ currentCountKing }}/{{ ALL_FILMS.length - 1 }}
<p/>
<div class="photos">
<div class="first__film">
<img :src="firstFilm.Poster" :alt="firstFilm.title" @click="chooseLeftFilm">
<p id="title--film">{{ firstFilm.title }}</p>
</div>
<div class="second__film">
<img :src="secondFilm.Poster" :alt="secondFilm.title" @click="chooseRightFilm">
<p id="title--film">{{ secondFilm.title }}</p>
</div>
</div>
</div>
<div v-else class="winner">
<p id="winner--title">Winner</p>
<img :src="firstFilm.Poster" :alt="firstFilm.title">
</div>
</div>
</div>
</template>
<script>
import game from "@/mixins/game";
import Spinner from "@/components/Spinner/Spinner"; //all good in css . it works
export default {
name: "KingOfMountain",
data() {
return{
isLoading:false
}
},
components: {Spinner},
methods: {
chooseLeftFilm() {
this.isLoading=true
this.redirectToResultKing() // it is method in mixins (all Good, it works)
this.isLoading=false
},
chooseRightFilm() {
this.isLoading=true
this.firstFilm = this.secondFilm;
this.redirectToResultKing() // it is method in mixins (all Good, it works)
this.isLoading=false
}
},
}
</script>
If I use the following code snippet, the spinner appears:
chooseLeftFilm() {
this.isLoading=true
this.redirectToResultKing() // it is method in mixins (all Good, it works)
},
//It will show the spinner forever
Can anyone help me with a better way to implement the spinner functionality?
This is my mixins:
export default {
methods: {
updateFilm() {
//Here I randomly select 2 images from Vuex and manipulate them
this.currentCountKing++;
this.allFilmsKingCopy = this.allFilmsKingCopy.filter(val => val !== this.secondFilm);
this.secondFilm = this.allFilmsKingCopy[Math.floor(Math.random() * this.allFilmsKingCopy.length)];
},
redirectToResultKing() {
if (this.currentCountKing === this.ALL_FILMS.length - 1) {
this.isEndGameKing = true;
} else {
this.updateFilm();
}
}
},
computed: {
...mapGetters(['ALL_FILMS']),
},
This is my Vuex:
export default {
state: {
films: [],
},
actions: {
async getFilms({commit}) {
const data = await fetch(URL);
const dataResponse = await data.json();
const films=dataResponse.data;
commit("setData", films);
},
},
mutations: {
setData(state, films) {
state.films = films;
},
},
getters: {
ALL_FILMS(state) {
return state.films;
},
}
}