Vue js - 并非所有数据都在商店发货后显示

Vue js - not all the data showing after store dispatch

select框有时不显示第一种颜色,有时不显示第一种颜色。 我怎样才能让它显示 select 框中的所有项目? 由于某种原因我没有得到所有的承诺

您可以在图片中看到问题 请帮我解决这个问题我是 vue js 的新手

我的代码:

data() {
        return {
            propertiesTree: []
  }
}
getPropertyGroups(objectId: number): void {
            if (this.$data.currentObjectId === objectId)
                return;

            let component: any = this;

            this.$data.currentObjectId = objectId;

            component.showLoader();
            this.$store.dispatch('properties/getPropertyGroups', objectId)
                .then(({ data, status }: { data: string | Array<propertiesInterfaces.PropertyGroupDto>, status: number }) => {

                    // console.log(data, "data");
                    // console.log(status, "status")
                    if (status === 500) {
                        this.$message({
                            message: data as string,
                            type: "error"
                        });
                    }
                    else {
                        let anyData = data as any;
                        anyData.map(item => {
                            item.properties.map(prop => {
                                if(prop.type.toString() === 'dictionary'){
                                    prop.dictionaryList = [];
                                    prop.color = '';
                                    this.getWholeDictionaryList(prop.dictionaryId.value, prop)
                                }
                            });
                        });
              
                    }
                    component.hideLoader();
                });
        },
        getWholeDictionaryList(dictionaryId: number, prop: any){
            this.$store.dispatch('dictionaries/getWholeDictionaryList', dictionaryId).then(
                ({ data, status }: { data: Array<any> |string , status: number })  => {
                if (status === 500) {
                    this.$message({
                        message: data as string,
                        type: "error"
                    });
                } else {
                    const arrData = data as Array<any>;
                    arrData.map((item,index) => {
                        prop.dictionaryList = [];
                        prop.dictionaryList = data;                 
                        this.getDictionaryItemColor(item.id.value, data, index, prop);
                    });
                }
            });
        },
        getDictionaryItemColor(dictionaryItemId:number, dictionaryList: Array<any>, index:number, current){
            this.$store.dispatch('patterns/getDictionaryItemColor', dictionaryItemId).then((data: any, status: number) => {
                if (status === 500) {
                    this.$message({
                        message: data as string,
                        type: "error"
                    });
                } else{
                    debugger
                    if(current.dictionaryItemId.value === data.data.sceneObjectId)
                    current.color = data.data.colorString;
                     dictionaryList[index].color = data.data.colorString ? data.data.colorString: '#FFFFFF';

                }
            });
        },

Html select 框的代码

  <el-select v-model="data.color" placeholder="Select">
    <el-option
      v-for="item in data.dictionaryList"
      :key="item.name"
      :label="item.color"
      :value="item.color">
    </el-option>
  </el-select>

我return派遣了

let dispatch = this.getWholeDictionaryList(prop.dictionaryId.value, prop)
let promiseArr = [];

promiseArr.push(调度); 在我做了地图结束标记后

Promise.all(promisArr).then( () => {
                                        debugger
                                        this.$data.propertiesTree = anyData;
                                    });

我已经解决了