javascript - 如何在Vue.js中处理异步数据加载和渲染?

Question

一个select框组件,其中的数据是从后端返回的,打开这个组件时往里传入了value值,但是页面打开时也会显示这个value值,等后端结果返回才能显示对应的label值,如何让组件先不渲染value直接渲染label?

将请求的生命周期放在async created中没用

Answer 1

我的思路是，子组件内部先根据option的长度判定是否传给Select组件value，当option为空的时候，传给它undefined，然后通过Select的change事件emit数据给父组件，你的单选联动可以在单选改变之后，调子组件的获取options方法

<template>  <el-select :value="selectVal" @change="handleChange">    <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />  </el-select></template><script>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)    }  }}</script>

Answer 2

<template>  ...  <span v-if="loading"> loading</span>  <Select v-else :value="value">    <Option v-for="item in options" :label="item.label" :value="item.value"></Option>  </Select>  ...  </template>  <script>  export default {    data() {      return {        options: [],        value: null,        loading: false      }    },    created() {      this.handleGetOptions()    },    methods: {      async handleGetOptions() {        this.options = []        this.loading = true        try {          let res = await this.$api.get('api/v1/options')          this.options = res.data        } catch (error) {          console.log(error)        } finally {          this.loading = false        }      }    }  }  </script>

加个loading遮罩，等请求完了再显示select

Answer 3

页面打开和打开组件是同一个操作吗，页面打开时有赋值value吗

Answer 4

哎，我研究了好久，最后我的解决方案是父组件监听每个子组件的change，子组件获取数据之后再emit值，父组件监听到之后查一下是不是已返回的组件数=所有组件数了
下面是父组件的代码

callback() {      if (!this.searchTpl) return;      if (Object.keys(this.options).length < this.searchTpl.length) return;      const optionMap = new Map()      for (let o in this.options) {        optionMap.set(o, this.options[o])      }      const query = []      for (let item of this.searchTpl) {        item.value = optionMap.get(item.field.toString())        query.push(item)      }      this.$parent.query = query;      this.$parent.getList()    },