Search code examples
vue.jsvuex

Vue js - not all the data showing after store dispatch


The select box not showing sometimes the first color and sometimes not showing the first color. How can i make it to show all the item in the select box? I'm not getting for some reason all the promises

You can see the issue in the picture Please help me to fix this issue i'm new to vue js

enter image description here

My code:

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 code of the select box

  <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>

Solution

  • I did return to dispatch

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

    promiseArr.push(dispatch); after the map closing tag i did

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

    And I've got it solved