如何在 Vue 组件渲染之前加载 Axios Response？

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 在从axios 函数内部加载到组件中之前更新为'storage/' + 'rkiGXBj7KJSOtsR5jiYTvNOajnzo7MlRAoXOXe3V.jpg'？

Answer 1

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

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