关于解决组件在获取数据之前就已经渲染完成导致数据加载失败的问题

关于解决组件在获取数据之前就已经渲染完成导致数据加载失败的问题

我需要传入banner_url给GVBBanner组件，来渲染一张背景图片，但是在我获取到数据之前，父组件已经将数据传入子组件的props中，导致GVBBanner组件渲染图片失败

<script setup>
const data = reactive({
  banner_url: "",
})


async function getData() {
  let res = await articleDetailApi(route.params.id)
  if (res.code) {
    message.error(res.msg)
    return
  }
  Object.assign(data, res.data)
  console.log(data.banner_url)
}
getData()

</script>

<div class="base_view article_view">
<GVBBanner is_article :title="data.title" :slogan="data.slogan" :url="data.banner_url"></GVBBanner>
</div>

解决方式：增加 v-if 代码来限制渲染

<div class="base_view article_view" v-if="data.banner_url !== ''">