如何在Vue.js中处理异步数据加载和渲染?-灵析社区
小青梅一个select框组件,其中的数据是从后端返回的,打开这个组件时往里传入了value值,但是页面打开时也会显示这个value值,等后端结果返回才能显示对应的label值,如何让组件先不渲染value直接渲染label? 将请求的生命周期放在async created中没用
001我的思路是，子组件内部先根据option的长度判定是否传给Select组件value，当option为空的时候，传给它undefined，然后通过Select的change事件emit数据给父组件，你的单选联动可以在单选改变之后，调子组件的获取options方法
export default {
props: ['value'],
emits: ['update:value'],
data() {
return {
selectOptions: [],
}
},
computed: {
selectVal() {
return this.selectOptions.length ? this.value : undefined
}
},
created() {
this.getOptions()
},
methods: {
async getOptions() {
this.selectOptions = []
// 异步请求任务
// awati axios(...)
this.selectOptions = [
{ value: 'Option1', label: 'Option1', },
{ value: 'Option2', label: 'Option2', },
]
},
handleChange(e) {
this.$emit('update:value', e)
}
}
}