mysql - 显示多对多关系结果并按相同 ID 对它们进行分组

Question

methods : {

    fetch(){
    
          axios.get('api/parcels/to-pack')
          .then(response => this.parcels = response.data)
          .catch(error => console.log(error.response.data));

        } , 
        
    

} 

		<div class="todo animated fadeinright delay-1" id="test1">
			<p class="todo-element" v-for="(parcel,index) in parcels" :key="parcel.id">
				<delivery-parcel :parcel="parcel"></delivery-parcel>
        
       
        
        
			</p>
		</div>
    
    
    
    DeliveryParcel Component : 
    

          <input :id="'todo'+id" type="checkbox" :checked="isPacked">

      <label :for="'todo'+id">Parcel : {{ id }}</label> 

      <span>Owner : {{ name }}</span>

      <span>Medicine ID : {{ medicine_id }} - {{ qty }} pcs </span>

• 在我的结果中:我的结果有

  [

     {
  
     parcel_id : 2
  
     package_id : 4
  
     quantity : 3,
  
     owner  : {
  
     id : 4030523 , 
  
     name : 'john doe' ,
  
     }
  
     }, { parcel_id : 2
  
     package_id : 5
  
     quantity : 6,
  
     owner  : {
  
     id : 4030523 ,  name : 'john doe' ,
  
     other fields...
   } 
  
     },
  
     },
     ]
  

  我想要的只是通过公共(public)键(parcel_id)显示结果。我当前的 View 显示如下:

但我想要的是将它们显示为按公共(public)键(parcel_id)分组的方式

所以类似

[]包裹:1

Medicine_id:3 - 3pcs

Medicine_id:2 - 3 件

Medicine_id:1 - 5pcs

[]包裹:11

Medicine_id:3 - 3pcs

Medicine_id:2 - 3 件

Medicine_id:1 - 5pcs

Answer 1

只需创建一个新的计算属性来转换您的数据并使用它，也许是这样的:

data() { 
    jsonData: [ /* ... */ ]
},
created() { /* ... */ },
computed: {
    transformedData() {
        return this.jsonData.reduce((acc, curr) => {
            const parcelId = curr.parcel_id; 
            if (Array.isArray(acc.parcelId)) {
                acc[parcelId].push(curr);
            } else {
                acc[parcelId] = [curr];
            }
            return acc;
        }, {});        
    }
}