vue在created中获取后台数据,在mounted中使用,但执行mounted时还没有取到后台数据,该怎么办
时间: 2024-03-15 13:47:39 浏览: 33
如果在created中获取后台数据,在mounted中使用,但执行mounted时还没有取到后台数据,可以考虑使用Vue的watch监听数据变化,当数据发生变化时再执行相关的逻辑。具体步骤如下:
1. 在data中定义一个变量,用于存储后台获取的数据。
2. 在created中调用后台接口获取数据,并将数据赋值给定义的变量。
3. 在mounted中使用watch监听数据变化,当数据变化时再执行相关的逻辑。
代码示例如下:
```
<template>
<div>
<!-- 在页面中使用获取到的数据 -->
<div v-if="data">{{ data }}</div>
</div>
</template>
<script>
export default {
data() {
return {
data: null // 定义一个变量,用于存储后台获取的数据
}
},
created() {
// 调用后台接口获取数据
axios.get('/api/data').then(res => {
this.data = res.data
})
},
mounted() {
// 使用watch监听数据变化,当数据变化时再执行相关的逻辑
this.$watch('data', (newVal, oldVal) => {
if (newVal) {
// 数据已获取到,可以执行相关的逻辑
console.log('数据已获取到:', newVal)
}
})
}
}
</script>
```