如何移除JSON中的空字符串？解决Nuxt 3.4.1报错问题

问题说明 #

使用Nuxt 3.4.1循环渲染<Img>组件时，因JSON数据中存在sponsors字段为空字符串的项，触发报错：

input must be a string (received string: "")

解决方案 #

1. 从数据源过滤空字符串

在获取JSON数据的环节直接处理，移除或清理空字段，避免后续渲染报错。示例代码（以useFetch为例）：

const { data: home } = await useFetch('/api/home', {
  transform: (res) => {
    // 方案1：过滤掉sponsors为空的条目
    return res.filter(item => item.sponsors.trim() !== '')
    
    // 方案2：保留条目但删除所有空字符串字段
    // return res.map(item => {
    //   Object.entries(item).forEach(([key, value]) => {
    //     if (value === '') delete item[key]
    //   })
    //   return item
    // })
  }
})

2. 组件层面条件渲染

在模板中直接判断字段是否为空，仅渲染有效数据：

<Grid class="sponsors">
  <Img 
    v-for="prop in home" 
    v-if="prop.sponsors.trim()" 
    :src="prop.sponsors" 
    :width="300" 
    :key="prop.id || prop.films"
  />
</Grid>

如果需要保留所有条目，可给空字段设置默认图片：

<Grid class="sponsors">
  <Img 
    v-for="prop in home" 
    :src="prop.sponsors || '/assets/default-sponsor.png'" 
    :width="300" 
    :key="prop.id || prop.films"
  />
</Grid>

内容的提问来源于stack exchange，提问作者Alexander Krupnitsky