Vue.jsでデータ情報が無い時(空配列)に「No Data」と表示するように設定する
v-ifを使う
taskというデータの入れ物がある状態でからの場合は「No Data」を表示し、axiosなどで情報を取得したときにはそのデータをそのまま表示をしたいケースを想定してみます。
<template>
<div>
<div v-if="task.length===0">
<h1>No Data</h1>
</div>
<div v-else">
<h1>{{ task }}</h1>
</div>
</div>
</template>
export default {
data() {
return {
task: {}
}
}
v-if="task.length===0"と配列の長さを確認することでデータの有無を確認できます。
