お世話になります。
名前は仮ですがhoge.vue(コンポーネントの名前)と言うコンポーネントで
以下の処理を行いたかったのですが
- for文の開始前にv-ifの対象のパラメターをture
- ローディング用のdiv(オブジェクト)を表示になる
- forの終了後にv-ifの対象のパラメターをfalse
- ローディング用のdivを非表示になる
実現できませんでした。
ですが
- setTimeoutの開始前にv-ifの対象のパラメターをture
- ローディング用のdiv(オブジェクト)を表示になる
- setTimeoutで2000秒後にv-ifの対象のパラメターをfalse
- ローディング用のdivを非表示になる
は実現出来ました。
for文で実現する方法があればご教授いただければ幸いです。
テンプレートなどの概要
テンプレートなどの概要は以下の通りです。
ローディング用のdiv
<div class="loading" v-if='isLoading'>
ローディングが表示されなかったっメソッド
hoge.vueのmethodsから抜粋
test() { this.isLoading = true; for (let i = 0, len = 9999; i < len; i += 1) { console.log(this.isLoading); // true } this.isLoading = false; }
ローディングが表示されたメソッド
test002() { this.isLoading = true; setTimeout(() => { this.isCsvUpdating = false; }, 2000); }
テンプレート
hoge.vue
<template> <div class="loading" v-if='isLoading'> <div class="loader"></div> </div> <div> ///コンテンツの内容 </div> <template> // 省略 export default { name: 'hoge', // 省略 }, // 省略 methods: { test() { //※上記のメソッドなので内容は省略 }, test002() { //※上記のメソッドなので内容は省略 }, }, data() { return { isLoading: false, } } // CSS .loading { //省略 } . loader { //省略 } ////他では動いているのでコードは省略しますが、よくある半透明の黒背景に ////白い円が回っているアニメーションをCSSで作っています。
あなたの回答
tips
プレビュー