<p>画像の読み込み時に読み込みアニメーションを表示したいのですが、どうすれば実現できるのかわかりません。 <br /><br />ローダーがないのですが、デバッグしてコンソールに「true」と「false」が表示されましたが、やはりローディングアニメーションが出ません。 </p>

<pre class="brush:php;toolbar:false;"><テンプレート> <div class="キングオブマウンテン"> <スピナー v-if="isLoading"/> //// エラー <div v-else class="コンテナ"> <div v-if="!isEndGameKing" class="choices"> <p id="スコア">{{ currentCountKing }}/{{ ALL_FILMS.length - 1 }} <p/> <div class="写真"> <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="セカンドフィルム.ポスター" :alt="セカンドフィルム.タイトル" @click="chooseRightFilm"> <p id="title--film">{{ SecondFilm.title }}</p> </div> </div> </div> <div v-else class="勝者"> <p id="winner--title">Победитель</p> <img :src="firstFilm.Poster" :alt="firstFilm.title"> </div> </div> </div> </テンプレート> <スクリプト> 「@/mixins/game」からゲームをインポートします。 "@/components/Spinner/Spinner" から Spinner をインポートします。 // css ですべて問題ありません。それは動作します デフォルトのエクスポート { 名前: 「キング・オブ・マウンテン」、 データ（） { 戻る{ isLoading:false } }、 コンポーネント: {スピナー}、 メソッド: { chooseLeftFilm() { this.isLoading=true this.redirectToResultKing() // これはミックスインのメソッドです (すべて問題なく動作します) this.isLoading=false }、 ChoiceRightFilm() { this.isLoading=true this.firstFilm = this.secondFilm; this.redirectToResultKing() // これはミックスインのメソッドです (すべて問題なく動作します) this.isLoading=false } }、 } </script></pre> <p>如果我像这样使用，它会显示加下动画：</p> <pre class="brush:php;toolbar:false;">chooseLeftFilm() { this.isLoading=true this.redirectToResultKing() // これはミックスインのメソッドです (すべて問題なく動作します) },</pre> <p>// 永遠に回転します</p> <p>帮我、どのようにしてより好地に追加アニメーション画を制作しますか?</p> <p>私たちの混入（ミックスイン）:</p> <pre class="brush:php;toolbar:false;">デフォルトのエクスポート { メソッド: { updateFilm() { // ここでは、Vuex からランダムに 2 つの画像を取得し、それらを削除します... 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 } それ以外 { this.updateFilm() } } }、 計算結果: { ...mapGetters(['ALL_FILMS']), },</pre> <p>私たちの Vuex:</p> <pre class="brush:php;toolbar:false;">デフォルトのエクスポート { 州： { 映画: []、 }、 行動： { async getFilms({commit}) { const data = await fetch(URL); const dataResponse = await data.json(); const フィルム=dataResponse.data commit("setData", フィルム) }、 }、 突然変異: { setData(状態, フィルム) { state.films = フィルム }、 }、 ゲッター: { ALL_FILMS(状態) { state.films を返す }、 } }</pre> <p><br /></p>