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

Posted 2023-02-22

【中文标题】如何在 Vue 组件渲染之前加载 Axios Response？

【英文标题】：How to load Axios Response before Vue Component renders?

【发布时间】：2021-12-09 20:27:18

【问题描述】：

我想使用：

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'？

【参考方案1】：

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

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

【讨论】：

将value 添加到作业中使其工作。谢谢 ：-）。请问require是干什么用的？我似乎不需要添加它，它可以工作。

嘿，伙计，require 如果您从资产目录中获取图像，则需要，在您的情况下，您不需要它，所以这是我的错误，我将从答案中删除它，干杯:)