Nuxt выдает ошибку пустой строки из JSON при сборке. Как исправить?
Пример моей страницы, где я в цикле вызываю json, который мне отдают иногда пустые строки, на это ругается Nuxt при сборке. Как это исправить?
Ошибка при сборке:
500 input must be a string (received string: "")
Код страницы:
<template>
<NuxtLayout name="main">
<!-- ---------- HERO ---------- -->
<Hero>
<Nav />
<Grid class="sponsors">
<Img v-for="prop in home" :src="prop.sponsors" :width="300" />
</Grid>
<h1 class="font-title">
<span class="title">Крым</span>
<br>
<span class="subtitle">Зеркало истории</span>
</h1>
<Btn :to="'#films'" :text="'Смотреть сериал'" />
</Hero>
<!-- ---------- /HERO ---------- -->
<!-- ---------- GALLERY ---------- -->
<!-- ---------- /GALLERY ---------- -->
</NuxtLayout>
</template>
<script setup>
const { data: home } = await useFetch(useRuntimeConfig().public.api + '/home')
useHead({
title: home.value[0].title,
meta: [{ name: "description", content: home.value[0].desc }]
})
</script>
JSON:
[
{
"title": "Film",
"desc": "Film desc",
"sponsors": "sponsors/culture-fond_ftl1iu_nhpivj.png",
"films": "film 1"
},
{
"title": "",
"desc": "",
"sponsors": "sponsors/muzey-tavrida-bw_wedmvw_qf4ixd.png",
"films": "film 2"
},
{
"title": "",
"desc": "",
"sponsors": "sponsors/insightstudio-logo-white_rc0vme.png",
"films": "film 3"
},
{
"title": "",
"desc": "",
"sponsors": "",
"films": "film 4"
},
{
"title": "",
"desc": "",
"sponsors": "",
"films": "film 5"
},
{
"title": "",
"desc": "",
"sponsors": "",
"films": "film 6"
}
]
Как игнорировать ошибку и просто продолжить цикл? Или как удалить пустые строки при получении JSON?
И использую Nuxt 3.4.1