显示多对多关系结果，并按相同的ID

Question

＆＃13;

＆＃13;

methods : {

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

        } , 
        
    

} 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

• 在我的结果中：我的结果是

  [

     {
  
     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...
   } 
  
     },
  
     },
     ]
  

  我想要的只是通过parcel_id的公共密钥显示结果。我当前的视图显示如下：

但我想要的是将它们显示为按公共密钥分组，即parcel_id

所以像

这样的东西

[]包裹：1

Medicine_id：3 - 3pcs

Medicine_id：2 - 3pcs

Medicine_id：1 - 5pcs

[]包裹：11

Medicine_id：3 - 3pcs

Medicine_id：2 - 3pcs

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;
        }, {});        
    }
}