🖥
nuxt ( Vue ) で画面をリロードするとレイアウトが崩れてチラつく ( データのローディング中をテキストで表現する )
コードの例
以下は解決後のコード。
pages/single/_id.vue
<template>
<div>
<h2>{{article.title || "Loading"}}</h2>
<ul>
<li>user id: {{article.userId || "Loading"}}</li>
<li>post id: {{article.id || "Loading"}}</li>
</ul>
<div>
<p>{{article.body || "Loading"}}</p>
</div>
</div>
</template>
<script>
import axios from 'axios';
const END_POINT = 'https://jsonplaceholder.typicode.com/posts';
export default {
data() {
return {
article: {
title: null,
userId: null,
body: null
},
}
},
async created() {
try {
let res = await axios.get(END_POINT + `/${this.$route.params.id}`);
console.log(res.data);
this.article = res.data;
} catch (error) {
console.log(`error: ${error}`);
}
}
}
</script>
問題
データが読み込める前と後ではレイアウトが変わってしまい、結果としてチラツキが発生していたみたいだ。
データが読み込める前の画面
データが読み込めた後の画面
簡易なテキストでローディングを表現する
何もデータが得られていない場合をてきとうに文字で埋めてしまえば、とりあえずレイアウト崩れは防げた。
もちろんCSSをちゃんと当てれば防げる問題だろうが。
データ読込後に全体を表示する場合
v-if で表示エリア全体を囲めば良さそうだ。
<template>
<div>
<div v-if="article.title">
<h2>{{article.title}}</h2>
<ul>
<li>user id: {{article.userId}}</li>
<li>post id: {{article.id}}</li>
</ul>
<div>
<p>{{article.body}}</p>
</div>
</div>
</div>
</template>
参考
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
公開日時
2022-10-01
Discussion