On the problem of data binding in a drop-down box of vue

CrdName: ""
CreatorID: 3
ItmID: "1010240002"
ItmName: ""
ItmSpec: "CGF-10044"
MDBomAItems: 
[{Docentry: 12166, BomBDocentry: 12169, Machines: [,], LineNum: 2, MachineID: null,},]
    0: {Docentry: 12166, BomBDocentry: 12169, Machines: [,], LineNum: 2, MachineID: null,}
    BomBDocentry: 12169
    ItmName: "()CGF-10044"
    ItmSpec: null
    LineNum: 2
    Machines: [,]
        0: {PKID: 2, MachineName: "1", WorkshopID: 1, Workshop: null, MachineTypeID: 2, Dictionary: null,}
        1: {PKID: 3, MachineName: "2", WorkshopID: 1, Workshop: null, MachineTypeID: 2, Dictionary: null,}
    1: {Docentry: 12166, BomBDocentry: 12170,}
    BomBDocentry: 12170
    Docentry: 12166
    ItmID: "300106087"
    ItmName: "()CGF-10044"
    ItmSpec: null
    LineNum: 3
    MachineID: null
    Machines: [{PKID: 1, MachineName: "", WorkshopID: 1, Workshop: null, MachineTypeID: 3, Dictionary: null,},]
        0: {PKID: 1, MachineName: "", WorkshopID: 1, Workshop: null, MachineTypeID: 3, Dictionary: null,}
        1: {PKID: 4, MachineName: "", WorkshopID: 1, Workshop: null, MachineTypeID: 3, Dictionary: null,}
OrderNO: "11660"
PKID: 4
POID: 31

this is the data format returned to me by the backend. I want to bind the data in the Machines field to two drop-down boxes, as shown in the following figure

clipboard.png
but I have tied all the devices in the drop-down box. The first drop-down box should be bound to the high-voltage machine 1 and the high-voltage machine 2 of the corresponding data, and the second drop-down box should be bound to the gravity of the corresponding data. Do not know how to get the binding, the following code

getApsList() {
  const param = {
    PKID: this.listAps.PKID                    //PKID
  };
  api.getaps(param).then(response => {
    let data = response.data;                   //
    this.ApsInfo = data;                        //this.ApsInfo
    this.ApsMDBomAItems = data.MDBomAItems;     //MDBomAItemsthis.ApsMDBomAItems 
    let arr =[];
    for(let items of data.MDBomAItems){         //MDBomAItems
      for(let item of items.Machines){          //Machines    
        arr.push({                              //push arr   
          value: item.PKID,
          label: item.MachineName
        });
      }
    }
    this.APSmachineName = arr;                  // HTML
  });
},



    <el-table-column label="" width="200px" align="center">
      <template slot-scope="scope">
        <el-select v-model="scope.row.MachineID" placeholder=""  clearable @change="watchSelect(scope.row.MachineID)">
          <el-option v-for="item of APSmachineName" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </template>
    </el-table-column>

I"d like to ask the boss to help me see how to change it. I"d better have a code hint. If the expression is not clear enough, you can leave a message and ask me. Thank you

.
Jul.18,2021

can't you let the backend change the data format

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b37837-2c0a8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b37837-2c0a8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?