## 事象 以下のように`v-overlay`を使ってローディング実装すると、オーバーレイとしてローディング表示されるが、オーバーレイをクリックするとローディングが消えてしまう。 ```html <v-overlay :model-value="loadingState" class="align-center justify-center" > <v-progress-circular color="primary" indeterminate :size="64" /> </v-overlay> ``` ## 原因 `v-overlay`の`persistent`プロパティが`true`になっていないから。 ## 解決方法 `v-overlay`の`persistent`プロパティを`true`にする。 ```html <v-overlay :model-value="loadingState" :persistent="true" class="align-center justify-center" > <v-progress-circular color="primary" indeterminate :size="64" /> </v-overlay> ``` <button class="playground"><a href="https://play.vuetifyjs.com/#eNqVUttuGjEQ/ZWpHxIi7YU2UVWtCKLf0L5l82CMAQff5PESUcS/d+xdyIa0lSqEtHM758zxPB3Zd++rfSdZw2ZRGq95lPPWAsz2Jfc+f+bAcGWHKMduL4Pmh5RpY/o1xq2kLvdcd/KxZdrxlbKbH5EAW3YeBGi8DKgwShupK4ZuqPYgQnNEynOtNrYU1CQDvHQY1fowhKm9b77IyYJ8cJsgEUuhgug0D29VAOG0C4TrgzI8HMaCAJRdSQI2yiato0KD6lfa5evDeKB+s6G++HDJjSxaRgsLoZXYXfkBj/DpvT/zrdvIBEczZ88pupiegv45ZvXomShEEZSPgDJ2qayMdyHCEYJcF/DKo9jCCdbBGbilZ75NM8JZjHAliPona65R3rU2j03GDQVM8A4e53BMahBubhLjT2Wk6+Jk0pfGA1W+A8LNmKcCvkynU4I+0X9W96JJLitYr5hW9dULOkuHmDnaoYAta3rWlKMVUtyybYwem7rurN9tKuFMvaBaHTobSVS5cmZxX91X05Jrv+XVQ72imxuXK4mmXAb3ijIQccuKEUc6t7/xDGWC/1x962GHVKn5EhPuB7yaSOhOyiDp1EK64X/scNX7pz2uWj7skqhPZDbZq5Xd4ZWzArOrT2eF/79kRkjjz4nlVLB3Iok2D7Ln370OcCk=">Playground</a></button> ## 参考 - [v\-overlay API — Vuetify](https://next.vuetifyjs.com/en/api/v-overlay/)