如何在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

哎，我研究了好久，最后我的解决方案是父组件监听每个子组件的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()
    },

Answer 3

问题本质是select下拉选择框如何在option里匹配不到value时展示value的label而非value的value

Answer 4

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

Answer 5

<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