如何在Vue组件渲染之前加载Axios响应?

Question

我想使用:

homePage.image = 'storage/' + 'rkiGXBj7KJSOtsR5jiYTvNOajnzo7MlRAoXOXe3V.jpg'

内:

<div class="home-image" :style="{'background-image': 'url(' + homePage.image + ')'}"></div>

在Vue组件呈现之前，但是homePage.image返回""。

这是我的组件:

<template>
<section id="home" class="home">
<div class="image-container">
<div class="home-image" :style="{'background-image': 'url(' + homePage.image + ')'}"></div>
</div>
</section>
</template>

<script setup>
import {ref} from 'vue';
const homePage = ref({
image: ""
});
axios.get('/home')
.then(res => {
homePage.image = 'storage/' + 'rkiGXBj7KJSOtsR5jiYTvNOajnzo7MlRAoXOXe3V.jpg'; // storage link + image file name
})
.catch(err => {
console.log(err.response);
});
// works
// const image = 'storage/' + 'rkiGXBj7KJSOtsR5jiYTvNOajnzo7MlRAoXOXe3V.jpg';
</script>

我如何让homePage.image更新到'storage/' + 'rkiGXBj7KJSOtsR5jiYTvNOajnzo7MlRAoXOXe3V.jpg'之前，它是从axios函数内部加载到组件?

Answer 1

当您使用ref进行反应性时，您必须使用value:

homePage.value.image = 'storage/' + 'rkiGXBj7KJSOtsR5jiYTvNOajnzo7MlRAoXOXe3V.jpg';