如何在 Vue 组件渲染之前加载 Axios Response?
How to load Axios Response before Vue Component renders?
我想使用:
homePage.image = 'storage/' + 'rkiGXBj7KJSOtsR5jiYTvNOajnzo7MlRAoXOXe3V.jpg'
里面:
<div class="home-image" :style="{'background-image': 'url(' + homePage.image + ')'}"></div>
在渲染 Vue 组件之前 homePage.image
returns ""
.
这是我的组件:
<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'
?
当您使用 ref
进行反应时,您必须使用 value
:
homePage.value.image = 'storage/' + 'rkiGXBj7KJSOtsR5jiYTvNOajnzo7MlRAoXOXe3V.jpg';
我想使用:
homePage.image = 'storage/' + 'rkiGXBj7KJSOtsR5jiYTvNOajnzo7MlRAoXOXe3V.jpg'
里面:
<div class="home-image" :style="{'background-image': 'url(' + homePage.image + ')'}"></div>
在渲染 Vue 组件之前 homePage.image
returns ""
.
这是我的组件:
<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'
?
当您使用 ref
进行反应时,您必须使用 value
:
homePage.value.image = 'storage/' + 'rkiGXBj7KJSOtsR5jiYTvNOajnzo7MlRAoXOXe3V.jpg';